常规功能和模块自定义系统 (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);
}
}

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