Extjs4 MVC 添加view層

如果這不是您感興趣或者需要學習的東西，何必點開呢？人生苦短。
實例中我們通過view層望主界面中添加一個grid，

1、app.js改成如下：

Ext.Loader.setConfig({enabled:true});//開啟動態加載
Ext.application({
    name: 'MVC',

    appFolder: 'mvc',
    
    controllers: ['MVCS'],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

2.MVC/view/mvc/MVCS.js改成如下所示：

Ext.define('MVC.view.mvc.MVCS' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : '人員列表',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: '張三',    email: '[e-mail]'},
                {name: '李四', email: '[e-mail]'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

代碼如上，alias為我們定義的grid聲明了一個別名userlist，我們可以直接通過xtype:'userlist'生成我們定義的grid，app.js中我們的xtype既是。

3、我們在controller中聲明我們使用的views，如下：

Ext.define('MVC.controller.MVCS', {
    extend: 'Ext.app.Controller',
    
    views : ['mvc.MVCS'],

    init: function() {
        this.control({
            'userlist': {
                itemclick: this.editUser
            }
        });
    },

    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

 

如上，我們在views中聲明了我們的view，可添加多個，聲明方式為view文件夾下的路徑：mvc.MVCS,這樣我們的controller就能夠找到我們的views，並在controller中直接使用我們定義的別名找到我們的元素。我們在controller中通過this.control.為我們的grid定義了單擊事件，運行效果如下：

最終，我們實現了view層的添加並對view層進行了事件的添加，下一篇回憶一下modal層的添加。