Ext4.2.1 Model-Store-controller交互实例

11年前

这篇博客总结了富客户端应用程序设计中，Ext MVC application architecture 概念的实际应用。针对Model、Store、Controller和Action四个核心模块进行关键部位该如何使用和交互的介绍。按照设计的先后顺序给出对应类和脚本。每个类和脚本都有注释，这个信息很重要。

Model层
两个Model：分别对应主表，和主表的从表

主 model，对应主表  Ext.define('AM.model.material.apply.ListModel', {      extend: 'Ext.data.Model',      requires:['AM.model.material.apply.DetailModel'],           fields:      [          {name: 'id'},       //索引          {name: 'sqyj'},     //申请依据          {name: 'sqdw'},     //申请单位          {name: 'sqdwmc'},     //申请单位名称          {              name: 'sqsj',// 申请时间              type: 'date',              dateFormat:'Y-m-d H:i:s'          },            {              name: 'sqlb', // 申请类别 0-维护保养 1-装备修理 2-战备补充              type:'int'          },          {              name: 'status',// 状态(已下达/未下达/已处理)              type:'int'          },          //拥有者          {name:'owner'},          //创建时间          {              name:'cjsj',              type:'date',              dateFormat:'Y-m-d H:i:s'          }      ],      hasMany:      {          model:'AM.model.material.apply.DetailModel',name:'qcsqmxbs'      }    });

对应明细表的Model

明细表 model 对应主表的明细表或叫从表  Ext.define('AM.model.material.apply.DetailModel',  {      extend:'Ext.data.Model',        fields:      [          {name: 'id'},        //索引          {name: 'qcsqb'},    //器材申请          {name: 'qcdm'},     //器材代码          {name: 'qcmc'},     //器材名称          {              name: 'sqlb', //类别(器材/物资)              type: 'int'          },          {name: 'qcsl'},     //器材数量          {name: 'jldw'},     //计量单位          {name: 'zbmc'},    //装备名称          {name: 'zbdm'},     //装备代码          //状态          {              name:'status',              type:'int'          },          //拥有者          {name:'owner'},          //创建时间          {              name:'cjsj',              type:'date',              dateFormat:'Y-m-d H:i:s'          }      ],      validations:      [          //用于设置字段为必填项（0为有效值，空字符串未无效值），若字段没有值或为无效值则不通过验证          {type:'presence',field:'qcmc'},          {type:'float',field:'qcsl'}      ],        idProperty:'id',      foreignKey:'qcsqb'  });

Store层
与两个Model对应的Store

主表、从表对应的Store  Ext.define('AM.store.material.apply.ListStore',  {      extend:'Ext.data.Store',      model:'AM.model.material.apply.ListModel',//使用到的对应的Model      autoLoad:false,      pageSize:25,      sorters:      [          {              property:'sqsj',              direction:'DESC'          }      ],        proxy:         {          type:'ajax', //代理模式！          api:          {              create:'material/apply!add.action',    //与对应Action的方法的交互方式！              read: 'material/apply!list.action',              update:'material/apply!update.action',              destroy:'material/apply!destroy.action'          },          reader:          {              type:'json',              root:'items',              totalProperty: 'results',              successProperty: 'success',              messageProperty: 'message'          },          writer: Ext.create('FH.util.JsonWriter',          {              //writeAllFields:false          }),          listeners:          {              exception: function(proxy, response, operation)              {                  Ext.MessageBox.show(                  {                      title: '请求处理错误',                      msg: Ext.isString(operation.getError())? operation.getError() : '请确认网络或服务是否正常',                      icon: Ext.MessageBox.ERROR,                      buttons: Ext.Msg.OK                  });              }          }      }  });

视图层：View
对应的两个View如下。这里值得一说的是在ExtJS-4的新特性和规范中，视图与Store和Model的关系由controller来控制。所以，在你看到的所有的 view 中，基本只有界面组件和一些事件监听的代码，很少能看到有Store和Model的出现。这点要注意。

这个功能页面的主视图   Ext.define('AM.view.material.apply.ListView',  {      extend:'Ext.container.Container',      id:'MaterialApplyListView',      alias:'widget.MaterialApplyListView', //对应left菜单里viewId        require:      [          'Ext.grid.*',          'Ext.data.*',          'Ext.ux.RowExpander',          'Ext.selection.CheckboxModel'      ],      layout:'border',       closable:'true',            initComponent:function ()      {          //其中包含大量的逻辑脚本，一般不会少于300行          //只为了说明使用方式，这里省略代码。      }  });

DetailView代码如下：

对应从表的明细界面，附属于这个功能的主界面   Ext.define('AM.view.material.apply.DetailView',  {      extend:'Ext.window.Window',      require:[          'Ext.selection.CellModel',          'Ext.grid.*',          'Ext.data.*',          'Ext.util.*'      ],      title:'XXX明细',      resizable:false,      closable:false,      width:'900',      height:'480',      modal:'true',      layout:'border',        initComponent:function ()      {          //其中包含大量的逻辑脚本，一般不会少于300行          //只为了说明使用方式，这里省略代码。      }  });

重要的Controller
由于这一段代码在这里总是报出有非法字符，而后日志则被拦截，所以代码段以图片的形势给出