<tbody id="d1jhg"></tbody><th id="d1jhg"><track id="d1jhg"></track></th>
    <nav id="d1jhg"></nav>
  • <em id="d1jhg"></em>
  • <th id="d1jhg"><pre id="d1jhg"><sup id="d1jhg"></sup></pre></th>

  • <em id="d1jhg"></em>
    <em id="d1jhg"><acronym id="d1jhg"></acronym></em><dd id="d1jhg"><noscript id="d1jhg"></noscript></dd>

    Extjs mvc

    小編:管理員 33閱讀 2022.09.07

    MVC的模式,模型(Models)和控制器(Controllers)

    Model模型 是字段和它們的數據的集合,例如User模型帶有username和password字段,模型知道如何持久化自己的數據,并且可以和其他模型關聯,模型跟ExtJS 3 中的Record類有點像(區別是,Record只是單純的扁平結構,而Model可以nest),通常都用在Store中去展示grid和其他組件的數據

    View視圖 是組件的一種,專注于界面展示 - grid, tree, panel 都是view

    Controllers控制器 一個安放所有使你的app正確工作的代碼的位置,具體一點應該是所有動作,例如如何渲染view,如何初始化model,和app的其他邏輯

    目錄結構如下圖所示:

    index.html 文件如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
         <meta charset="UTF-8">
         <title></title>
         <link rel="stylesheet" href="../resources/css/ext-all.css">
         <script type="text/javascript " src="../bootstrap.js"></script>
         <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
    </body>
    </html>
    復制

    Ext.app.application

    代表整個應用

    Ext.container.Viewport

    Viewport渲染自身到網頁的documet body區域, 并自動將自己調整到適合瀏 覽器窗口的大小,

    在窗口大小發生改變時自動適應大小,

    繼承于 :Ext.Component

    app.js 文件如下:

    Ext.application({
    //  動態加載 這個類。
         requires: ['Ext.container.Viewport'],
    // 這個應用的名字。
         name: 'FWY',
    // 應用程序的路徑
         appFolder: 'app',
    // 應用程序控制器名稱
         controllers: ['Students'],
           // 頁面 裝載完成后自動調用。
         launch: function () {
     Ext.create('Ext.container.Viewport',{
    //  布局
                 layou:'fit',
                 items: [{
                     xtype: 'studentlist'
                 }]
             })
         }
    });
    復制

    View 定義一個視圖。

    Ext.define('FWY.view.student.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.studentlist',
        store: 'Students',
        title: '學生信息列表',
        initComponent: function () {
            this.columns = [
                {header: '編號', dataIndex: 'id', flex:1},
                {header: '姓名', dataIndex: 'name', flex:1},
                {header: '年齡', dataIndex: 'age', flex:1},
                {header: '性別', dataIndex: 'sex', flex:1}
            ];
            this.callParent(arguments);
        }
    });
    復制

    創建一個model 文件

    Ext.define('FWY.view.student.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.studentlist',
        store: 'Students',
        title: '學生信息列表',
        initComponent: function () {
            this.columns = [
                {header: '編號', dataIndex: 'id', flex:1},
                {header: '姓名', dataIndex: 'name', flex:1},
                {header: '年齡', dataIndex: 'age', flex:1},
                {header: '性別', dataIndex: 'sex', flex:1}
            ];
            this.callParent(arguments);
        }
    });
    復制

    controller  層 創建文件

    Ext.define('FWY.controller.Students', {
        extend: 'Ext.app.Controller',
        views: [
            'student.List',
            'student.Edit'
        ],
        stores: ['Students'],
        models: ['Students'],
        init: function () {
            this.control({
                'studentlist': {
                    itemdblclick: this.editStudent
                },
                'studentedit button[action = save]' : {
                    click: this.updateStudent
                }
            });
        },
        onPanelRendered:function() {
            console.log("panel rendered!");
        },
        updateStudent: function(button) {
     // 獲取window 下面的 下面的 按鈕, 提交。
     var win = button.up('window'),
               form = win.down('form'),
               record = form.getReader()
        },
        editStudent: function (grid,record) {
     //  通過別名獲得這個組件
     var view = Ext.widget('studentedit');
     // 這個對象向下查找 form 組件,自動賦值
     view.down('form').loadRecord(record);
        }
    });
    復制

    store 創建文件。

    Ext.define('FWY.store.Students',{
        extend: 'Ext.data.Store',
        model:'FWY.model.Students',
        data: [
            {id:1,name:'zhangsan', age:18,sex:'boy'},
            {id:2,name:'lisi', age:20,sex:'gril'}
        ]
    });
    復制

    demo 下載 https://github.com/ningmengxs/Extjs.git

    關聯標簽:
    国产亚洲无线码在软件线,国产女人18毛一级毛片,亚洲中文综合手机版在线,国产另类综合一区导航,亚洲va韩国va欧美va久久下载,久久先锋男人资源网站
    五莲县坚果有限公司 庆元县养殖有限公司 龙游县水果有限公司 嘉善县可可有限公司 阳谷县种苗有限公司 微山县油子仁有限公司
    无棣县培训有限公司 天水市杂果有限公司 江油市牲畜有限公司 青田县造纸有限公司 莒南县果仁有限公司 定西市藤苇有限公司
    铜川市麻类有限公司 攀枝花市家禽有限公司 平邑县电子有限公司 安顺市干果有限公司 苍南县种苗有限公司 安康市果仁有限公司