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: 'zs@cnblogs.com'},
                {name: '李四', email: 'ls@cnblogs.com'}
            ]
        };

        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层的添加。