跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])
跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])
// 选择了主菜单上的菜单后执行 onMainMenuClick : function(menuitem) { var maincenter = this.getView().down('maincenter'); maincenter.setActiveTab(maincenter.add({ xtype : 'modulepanel', // 将当前的选中菜单的 "模块名称" 加入到参数中 moduleName : menuitem.moduleName, closable : true, reorderable : true })); }
// 这个配置去掉,把相应的设置放在initComponent里面 // viewModel : { // type : 'module' // }, bind : { // glyph : '{tf_glyph}', // 这一个绑定是无效的,在tabPanel渲染过后,再修改这个值,将不会有任何效果。 title : '{tf_title}' // 这个绑定是有效的,可以根据ModuleModel中的值来设置title }, layout : 'border', // 模块采用border布局 initComponent : function() { console.log(this.moduleName + ' 正在创建'); // 从MainModel中取得当前模块的定义数据,包括字段和各种设置的信息 var mainmodel = this.up('app-main').getViewModel(); var viewmodel = new Ext.create('app.view.module.ModuleModel', { // 将该模块的定义信息传递给本模块的viewModel module : mainmodel.getModuleDefine(this.moduleName) }); this.setViewModel(viewmodel);上面的一段代码中,先去掉了 viewModel的属性的配置,然后在initComponent的时候,根据传进来的moduleName,去取得模块的所有参数,并且创建ViewModel。然后再赋给自己使用。
再修改ModuleModel.js文件改成如下,主要把data中的初始化值都删掉了,然后增加了一个constructor的构造函数,在构造函数中将模块的信息赋值到data中。
/** * 模块的数据模型 */ Ext.define('app.view.module.ModuleModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.module', // 在开发过程中我先用设定好的值放于data中,等以后自定义的时候,data里的值都是从后台取得的 // 所有数据库里的字段,我都以tf_开头,只是为了表示这是从后台读取过来的 constructor : function() { Ext.log('module constructor'); var me = this; // 这一句是关键,如果没有的话,this还没有初始化完成,下面的Ext.apply(me.data,....)这句就会出错 this.callParent(arguments); // 取得MainModel.js中取得的这个模块的的初始化信息 console.log(this.module); Ext.apply(this.data, this.module) }, data : { tf_moduleId : null, // 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块。 tf_ModuleGroup : null,// 模块分组:模块分到哪个组里,比如说业务模块1、业务模块2、系统设置、系统管理等。 tf_moduleName : null, // 模块标识:系统中唯一的模块的标识 tf_title : null,// 模块名称:能够描述此模块信息的名称。 tf_glyph : null, // 图标字符值 tf_shortname : null,// 模块简称:如果名称过长,有些地方可以用简称来代替。 tf_englishName : null,// 模块英文名称:万一要制作英文版,可以用英文名称。 tf_englishShortName : null, // 模块英文简称:可以用作生成编码字段。 tf_description : null,// 模块描述: tf_remark : null, // 备注: // 下面还有若干字段未加入,以后用到的时候再加入 tf_primaryKey : null, // 主键 tf_nameFields : null, // 可用于描述记录的字段 // 此模块的自定义字段,此处先用手工定义,以后换成从数据库中自动取得 tf_fields : [], // 模块的grid方案,可以定义多个方案 tf_gridSchemes : [], // 模块的form方案,可以定义多个方案 tf_formSchemes : [], selectedNames : '' // 选中的记录的names显示在title上 }, formulas : { // 模块grid方案的选择Combo是否显示 gridSchemeHidden : function(get) { return this.get('tf_gridSchemes').length <= 1; } }, // 根据字段id,找到字段相应的定义 getFieldDefine : function(fieldId) { var result = null; Ext.Array.each(this.data.tf_fields, function(field) { if (field.tf_fieldId == fieldId) { result = field; return false; } }); return result; } })
经过以上几步的操作,可以看看结果了。在进入系统后,选择菜单中的“模块分组”菜单,会显示如下界面了:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。