ExtJS4的MVC模式实例

MVC模式， 想必大家都很清楚。  Model  -  View - Controller。

ExtJS在4.0以后也开始引入了MVC模式， 程序的结构也就变得规范。

开发者可以利用MVC的设计模式规划了开发流程。

下面的一个MVC模式的小例子。

在demo文件夹里就是ExtJS的MVC架构。

先来看界面。

demo.html是我们要登陆的界面，只需在demo.html中引入app.js文件即可。

app.js定义这个MVC模式的内容。 app文件夹是又controller , model, store, view文件夹。

app.js

 Ext.onReady(function() {

     Ext.QuickTips.init();

     Ext.Loader.setConfig({
         enabled : true
     });

     Ext.application({
         name: 'app',
         appFolder: 'app',
         launch: function() {
             Ext.create('Ext.container.Viewport', {
                 items: {
                     xtype : 'mainLayout'
                 }
             });
         },
         controllers : [
             'demoController'
         ]
     });

 });

定义mvc模式的文件夹为app。 应用程序的名字也是app。

demoModel.js

 Ext.define('app.model.demoModel',{
     extend : 'Ext.data.Model',
     fields : [
         {name : 'id' , type : 'int'},
         {name : 'name' , type : 'string'},
         {name : 'phoneNumber' , type : 'string'}
     ]
 })

demoStore.js

 var data = {
     users: [
         {
             id: 1,
             name: 'Ed Spencer',
             phoneNumber: '555 1234'
         },
         {
             id: 2,
             name: 'Abe Elias',
             phoneNumber: '666 1234'
         }
     ]
 };

 Ext.define('app.store.demoStore',{
     extend : 'Ext.data.Store',
     autoLoad: true,
     model : 'app.model.demoModel',
     data : data,
     proxy: {
         type: 'memory',
         reader: {
             type: 'json',
             root: 'users'
         }
     }
 })

这里由于是演示。我们使用了内存代理。 

deptList.js

 Ext.define('app.view.deptList', {
     extend : 'Ext.grid.Panel',
     alias : 'widget.deptList',
     frame : true,
     store : 'demoStore',
     frame : true,
     multiSelect : true,

     columns : [
         {header : '编号', dataIndex : 'id', width : 100},
         {header : '姓名', dataIndex : 'name', width : 100},
         {header : '电话', dataIndex : 'phoneNumber', width : 200}
     ],

 <span style="white-space:pre">  </span>tbar:[{
 <span style="white-space:pre">      </span>xtype: 'button', text: '添加'
 <span style="white-space:pre">  </span>},{
 <span style="white-space:pre">      </span>xtype: 'button', text: '删除'
 <span style="white-space:pre">  </span>},{
 <span style="white-space:pre">      </span>xtype: 'button', text: '修改'
 <span style="white-space:pre">  </span>}],


     selModel : {
         selType : 'checkboxmodel'
     }


 });

demoView.js只是一个普通的panel。 里面放这个grid。

注意上面的这个文件定义的时候必须以app开头。 因为我们在app.js里定义了应用程序的名字为app。

view文件夹以app.view.*开始。  model文件夹以app.model.*开始。 以此类推。

最后让我们来看下demoController.js

 Ext.define('app.controller.demoController', {
     extend: 'Ext.app.Controller',
     init: function() {
         this.control( {

             'deptList button[text=添加]': {
                 click: function(b) {
                     alert('添加');
                 }
             },

             'deptList button[text=删除]': {
                 click: function(b) {
                     alert('删除');
                 }
             },

             'deptList button[text=修改]': {
                 click: function(b) {
                     alert('修改');
                 }
             }

         }
     )},
     models : ['demoModel'],
     stores : ['demoStore'],
     views : ['demoView','deptList']
 });

有三个属性:

models， stores， views。  分别代表三个文件夹中自己定义的控件，model和store

我们在三个按钮的逻辑处理放到了controller中处理。 这样就很好的实现了代码分离。

最后附上源代码。。