码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-30 17:26:19      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:extjs5   开发经验   sencha   java web   

跟我一起学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个模块,因此有些菜单组下是无菜单的。在以后无菜单的菜单组将会被删除。

bubuko.com,布布扣



        前几节讲了简单的前后台交互建立系统主页和菜单的例子,在这之前,我把在Top区域“设置”中又增加了一些内容:增加了一个金额单位显示位置的设置,一种是将金额单位显示在数值之后,还有一种是显示在列头上,在数值中不显示。
bubuko.com,布布扣
bubuko.com,布布扣


        源码和数据库的下载地址:http://pan.baidu.com/s/1hqGcnze
        这里面包括了到现在为止的所有extjs的修改,java代码,各种配置文件和数据库。jar包如果找不齐的可以下载我的extjs4系列文章中的示例工程,里面都有(由于本人时间有限,工程搭建有问题请自行参照博客解决,祝大家国庆快乐)

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

标签:extjs5   开发经验   sencha   java web   

原文地址:http://blog.csdn.net/jfok/article/details/39695799

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!