跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])

跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])

        前几节处理好了后台，现在又要处理前台了。首先是要修改菜单的选择事件，在创建一个module的时候将 moduleName参数传递进去。

        修改MainController.js中的函数：

			// 选择了主菜单上的菜单后执行
			onMainMenuClick : function(menuitem) {
				var maincenter = this.getView().down('maincenter');

				maincenter.setActiveTab(maincenter.add({
							xtype : 'modulepanel',
							// 将当前的选中菜单的 "模块名称" 加入到参数中
							moduleName : menuitem.moduleName,
							closable : true,
							reorderable : true
						}));
			}

        然后要修改Module.js,让其能根据传进来的模块名称来进行一些相应的初始化工作。

			// 这个配置去掉，把相应的设置放在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;
			}

		})

        经过以上几步的操作，可以看看结果了。在进入系统后，选择菜单中的“模块分组”菜单，会显示如下界面了：

        至前，总算有了一点点的模块前后台关联了，慢慢的搭建这个平台，并且用这个平台来完成其他的设置任务。等到ＣＲＵＤ都做好了，就直接可以在前台来修改各种数据库里的配置信息了。