Extjs4 MVC 添加view层
实例中我们通过view层望主界面中添加一个grid，
1、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改成如下所示：
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: 'zs@cnblogs.com'},12 {name: '李四', email: 'ls@cnblogs.com'}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，如下：
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.editUser10 }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层的添加。