常规功能和模块自定义系统 (cfcmms)—011选择菜单后的执行过程

常规功能和模块自定义系统 (cfcmms)—011选择菜单后的执行过程

　　菜单的生成具体见下面一段代码，getMenus获取第一层菜单的items，在getaMenu函数中用了递归来生成各级子菜单。在各个可执行的菜单条中加入了菜单类型、模块名称、图标、handler的执行事件。

	// 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据
	getMenus : function() {
		var items = [];
		Ext.Array.each(this.get('menus'), function(group) { // 遍历菜单项的数组
			items.push(this.getaMenu(group));
		}, this);
		return items;
	},
	/**
	 * 根据group来返回该menu和所有的子menu
	 */
	getaMenu : function(group) {
		var items = [];
		// 菜单的类型 group ,module, reportGroup, report, function,
		// window, executestatement,separate
		Ext.each(group.tf_Menus, function(submenu) {
			if (submenu.menuType === 'group') {
				items.push(this.getaMenu(submenu));
			} else if (submenu.menuType === 'separate')
				items.push('-');
			else {
				items.push({
					menuType : submenu.menuType, // 菜单类型
					menuTypeId : submenu.menuTypeId,
					moduleName : submenu.moduleName, // 模块名称
					text : submenu.title,
					// 如果没有在菜单中设置icon,则看看module是否设置了icon
					icon : submenu.tf_iconUrl || submenu.moduleIconUrl,
					// 如果没有在菜单中设置glyph,则看看module是否设置了glyph
					iconCls : submenu.tf_iconCls || submenu.moduleiconCls,
					handler : 'onMainMenuClick' // MainController中的事件处理程序
				});
			}
		}, this);
		return {
			text : group.title,
			menu : items,
			iconCls : group.tf_iconCls,
			icon : group.tf_iconUrl
		};
	}

　　在源代码里，生成菜单条和按钮菜单使用的是上面的函数。生成树状菜单的和上面的类似，具体的代码在源文件中看得到。

　　在用户单击了一个菜单按钮后，将会执行MainController.js中的onMainMenuClick函数。

	// 选择了主菜单上的菜单后执行
	onMainMenuClick : function(menuitem) {
		// menuType ,module, reportGroup, report, function,
		// window, executestatement
		if (menuitem.menuType === 'module' || menuitem.menuType === 'reportGroup'
				|| menuitem.menuType === 'report')
			this.addModuleToCenter(menuitem);
		else
			// 其他类型的菜单选中后的执行
			;

	}

　　在上面的函数中，会判断将要执行的菜单命令的类型，如果是模块、综合查询分组或者是某个查询，会去执行CenterController.js中的addModuleToCenter函数。这里为什么在函数前使用this呢，这是由于在MainController.js中加入了mixins属性。这个属性基本上等同于多重继承的意思。

	// 混合设置，可以理解为多重继承，本类将继承下面的三个类中的方法
	mixins : {
		// 对grid中界面进行改变的控制器
		gridController : 'app.view.main.controller.GridController',
		// 对中央区域界面进行改变的控制器
		centerController : 'app.view.main.controller.CenterController',
		// 对左边菜单界面进行改变的控制器
		leftController : 'app.view.main.controller.LeftController'
	}

　　在CenterController.js中会去执行将模块加入到主区域中的函数。

	/**
	 * 点击了一个菜单项以后，加入到主区域的tabPanel中
	 */
	addModuleToCenter : function(menuitem) {
		console.log('addModuleToCenter : ' + menuitem.menuType + ','
				+ menuitem.text + ',' + menuitem.moduleName);

		var maincenter = this.getView().down('maincenter');
		// 对于设置了reference的控件，可以直接在控制器中使用下面的函数来查找得到。 如果你还是使用getCmp来取得控件的话，那得改改了。
		// var maincenter = this.lookupReference('maincenter');

		if (menuitem.menuType === 'module') {
			this.addModuleToMainRegion(menuitem.moduleName);
		} else if (menuitem.menuType === 'reportGroup')
			this.addReportToMainRegion({
				reportGroupId : menuitem.menuTypeId,
				text : menuitem.text
			});
	},

	/**
	 * 将标准模块加入tabpanel中了，如果已经有了，就转至该tab页 itemId:module_(moduleName)
	 */
	addModuleToMainRegion : function(moduleName) {
		var module = app.modules.getModule(moduleName);
		if (moduleName) {
			var view = this.getView().down('maincenter');
			var tabItemId = 'module_' + moduleName; // tabPanel中的itemId
			var tab = view.down('> panel#' + tabItemId);// 查找当前主区域中是否已经加入了此模块了
			if (!tab) {
				// 如果当前模块没有加入的话，去生成当前模块的控件
				tab = view.add(app.modules.getModule(moduleName).getModulePanel(
						tabItemId));
			}
			view.setActiveTab(tab);
		}
	}

　　至此，一个菜单的点击，就可以把一个模块加入到主显示区域之中了。