Extjs4 MVC 添加view层

实例中我们通过view层望主界面中添加一个grid，

1、app.js改成如下：

app.js

 1 Ext.Loader.setConfig({enabled:true});//开启动态加载
 2 Ext.application({
 3     name: 'MVC',
 4 
 5     appFolder: 'mvc',
 6     
 7     controllers: ['MVCS'],
 8 
 9     launch: function() {
10         Ext.create('Ext.container.Viewport', {
11             layout: 'fit',
12             items: {
13                 xtype: 'userlist'
14             }
15         });
16     }
17 });

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

view/mvc/MVCS.js

 1 Ext.define('MVC.view.mvc.MVCS' ,{
 2     extend: 'Ext.grid.Panel',
 3     alias : 'widget.userlist',
 4 
 5     title : '人员列表',
 6 
 7     initComponent: function() {
 8         this.store = {
 9             fields: ['name', 'email'],
10             data  : [
11                 {name: '张三',    email: '[email protected]'},
12                 {name: '李四', email: '[email protected]'}
13             ]
14         };
15 
16         this.columns = [
17             {header: 'Name',  dataIndex: 'name',  flex: 1},
18             {header: 'Email', dataIndex: 'email', flex: 1}
19         ];
20 
21         this.callParent(arguments);
22     }
23 });

代码如上，alias为我们定义的grid声明了一个别名userlist，我们可以直接通过xtype:'userlist'生成我们定义的grid，app.js中我们的xtype既是。

3、我们在controller中声明我们使用的views，如下：

controller

 1 Ext.define('MVC.controller.MVCS', {
 2     extend: 'Ext.app.Controller',
 3     
 4     views : ['mvc.MVCS'],
 5 
 6     init: function() {
 7         this.control({
 8             'userlist': {
 9                 itemclick: this.editUser
10             }
11         });
12     },
13 
14     editUser: function(grid, record) {
15         console.log('Double clicked on ' + record.get('name'));
16     }
17 });

 

如上，我们在views中声明了我们的view，可添加多个，声明方式为view文件夹下的路径：mvc.MVCS,这样我们的controller就能够找到我们的views，并在controller中直接使用我们定义的别名找到我们的元素。我们在controller中通过this.control.为我们的grid定义了单击事件，运行效果如下：

最终，我们实现了view层的添加并对view层进行了事件的添加，下一篇回忆一下modal层的添加。