跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])

跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单])

这一节根据后台传递过来的菜单分组和菜单定义，以及模块定义来更新4种类型的菜单。

按钮菜单和标准菜单的数据格式是一样的，生成的函数都在MainModel.js中，下面将其改一下：

			// 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据
			getMenus : function() {
				var items = [], me = this;
				Ext.Array.each(this.get('tf_MenuGroups'), function(group) { // 遍历菜单项的数组
							var submenu = [];
							// 对每一个菜单项，遍历菜单条的数组
							Ext.Array.each(group.tf_menuModules, function(menuitem) {
										// 根据moduleId取得该模块的定义
										var module = me.getModuleDefine(menuitem.tf_ModuleId);
										// 如果模块存在（或者具有浏览权限，以后加入）
										if (module) {
											submenu.push({
														mainmenu : 'true',
														moduleName : module.tf_moduleName,
														text : module.tf_title,
														icon : module.tf_icon,
														glyph : module.tf_glyph,
														handler : 'onMainMenuClick' // MainController中的事件处理程序
													})
											// 如果菜单定义了分隔下一条，那么菜单上加一个分隔线
											if (menuitem.tf_addSeparator)
												submenu.push('-');
										}
									})
							var item = {
								text : group.tf_title,
								menu : submenu,
								icon : group.tf_iconURL,
								glyph : group.tf_glyph
							};
							items.push(item);
						})
				return items;
			}

树状菜单也要进行修改：

/**
 * 树状菜单，显示在主界面的左边
 */
Ext.define('app.view.main.menu.MainMenuTree', {
			extend : 'Ext.tree.Panel',
			alias : 'widget.mainmenutree',
			title : '系统菜单',

			rootVisible : false,
			lines : false,

			initComponent : function() {
				this.store = Ext.create('Ext.data.TreeStore', {
							root : {
								text : '系统菜单',
								leaf : false,
								expanded : true
							}
						});
				var vm = this.up('app-main').getViewModel()
				var menus = vm.get('tf_MenuGroups');
				var root = this.store.getRootNode();
				for (var i in menus) {
					var menugroup = menus[i];
					var menuitem = root.appendChild({
								text : menugroup.tf_title,
								// 节点默认是否展开
								expanded : menugroup.tf_expand,
								icon : menugroup.tf_iconURL,
								glyph : menugroup.tf_glyph
							});
					for (var j in menugroup.tf_menuModules) {
						var menumodule = menugroup.tf_menuModules[j];

						var module = vm.getModuleDefine(menumodule.tf_ModuleId);
						if (module) {
							var childnode = {
								moduleId : module.tf_moduleId,
								moduleName : module.tf_moduleName,
								text : module.tf_title,
								leaf : true
							};
							menuitem.appendChild(childnode);
						}
					}
				}
				this.callParent(arguments);
			}
		})

手风琴式的折叠菜单：

/**
 * 折叠式(accordion)菜单，样式可以自己用css进行美化
 */

Ext.define('app.view.main.menu.AccordionMainMenu', {
			extend : 'Ext.panel.Panel',
			alias : 'widget.mainmenuaccordion',
			title : '系统菜单',

			layout : {
				type : 'accordion',
				animate : true
			},

			initComponent : function() {
				this.items = [];
				var vm = this.up('app-main').getViewModel();
				var menus = vm.get('tf_MenuGroups');
				var me = this;
				for (var i in menus) {
					var menugroup = menus[i];
					var accpanel = {
						menuAccordion : true,
						xtype : 'panel',
						title : menugroup.tf_title,
						bodyStyle : {
							padding : '10px'
						},
						layout : 'fit',
						dockedItems : [{
									dock : 'left',
									xtype : 'toolbar',
									items : []
								}],
						glyph : menugroup.tf_glyph
					};
					for (var j in menugroup.tf_menuModules) {
						var menumodule = menugroup.tf_menuModules[j];
						var module = vm.getModuleDefine(menumodule.tf_ModuleId);
						if (module) {
							accpanel.dockedItems[0].items.push({
										xtype : 'buttontransparent',
										text : this.addSpace(module.tf_title, 12),
										glyph : module.tf_glyph,
										handler : 'onMainMenuClick'
									});
						}
					}
					this.items.push(accpanel);
				}
				this.callParent(arguments);
			},

			addSpace : function(text, len) {
				var result = text;
				for (var i = text.length; i < len; i++) {
					result += '　';
				}
				return result;
			}

		})

下面看看修改过后的样子：由于现在各个模块分组下的模块都没有加入，只有“系统管理”下有4个模块，因此有些菜单组下是无菜单的。在以后无菜单的菜单组将会被删除。