与我一起extjs5(09--其定义菜单2)

跟我一起学extjs5(09--自己定义菜单2)

        这一节来定义另外三种类型的菜单类。

首先定义菜单button类。文件放于app/view/main/region文件夹以下，文件名称为ButtonMainMenu.js。

/**
 * 显示在顶部的按钮菜单。能够切换至标准菜单，菜单树
 */
Ext.define('app.view.main.region.ButtonMainMenu', {
 
			extend : 'app.ux.ButtonTransparent',
 
			alias : 'widget.buttonmainmenu',
 
			viewModel : 'main',
 
			text : '菜单',
			glyph : 0xf0c9,
 
			initComponent : function() {
 
				this.menu = this.getViewModel().getMenus();
 
				this.callParent();
			}
 
		})

另外一种树状菜单，文件名称为MainMenuTree.js。

/**
 * 树状菜单。显示在主界面的左边
 */
Ext.define('app.view.main.region.MainMenuTree', {
			extend : 'Ext.tree.Panel',
			alias : 'widget.mainmenutree',
			title : '系统菜单',
			glyph : 0xf0c9,
			rootVisible : false,
			lines : true,
			viewModel : 'main',
 
			initComponent : function() {
				this.store = Ext.create('Ext.data.TreeStore', {
							root : {
								text : '系统菜单',
								leaf : false,
								expanded : true
							}
						});
				var menus = this.getViewModel().get('systemMenu');
				var root = this.store.getRootNode();
				for (var i in menus) {
					var menugroup = menus[i];
					var menuitem = root.appendChild({
								text : menugroup.text,
								expanded : menugroup.expanded,
								icon : menugroup.icon,
								glyph : menugroup.glhpy
							});
					for (var j in menugroup.items) {
						var menumodule = menugroup.items[j];
						var childnode = {
							moduleId : menumodule.text,
							moduleName : menumodule.module,
							text : menumodule.text,
							leaf : true
						};
						menuitem.appendChild(childnode);
					}
				}
				this.callParent(arguments);
			}
		})

第三种为折叠式菜单。文件名称为AccordionMainMenu.js。

/**
 * 折叠式(accordion)菜单，样式能够自己用css进行美化
 */
 
Ext.define('app.view.main.region.AccordionMainMenu', {
			extend : 'Ext.panel.Panel',
			alias : 'widget.mainmenuaccordion',
			title : '系统菜单',
			glyph : 0xf0c9,
 
			layout : {
				type : 'accordion',
				animate : true
			},
 
			viewModel : 'main',
 
			initComponent : function() {
				this.items = [];
				var menus = this.getViewModel().get('systemMenu');
				for (var i in menus) {
					var menugroup = menus[i];
					var accpanel = {
						menuAccordion : true,
						xtype : 'panel',
						title : menugroup.text,
						bodyStyle : {
							padding : '10px'
						},
						layout : 'fit',
						dockedItems : [{
									dock : 'left',
									xtype : 'toolbar',
									items : []
								}],
						glyph : menugroup.glyph
					};
					for (var j in menugroup.items) {
						var menumodule = menugroup.items[j];
						accpanel.dockedItems[0].items.push({
									xtype : 'buttontransparent',
									text : this.addSpace(menumodule.text, 12),
									glyph : menumodule.glyph,
									handler : 'onMainMenuClick'
								});
					}
					this.items.push(accpanel);
				}
				this.callParent(arguments);
			},
 
			addSpace : function(text, len) {
				console.log(text.length);
				var result = text;
				for (var i = text.length; i < len; i++) {
					result += '　';
				}
				return result;
			}
 
		})

把这三种类型的菜单增加到页面中。

先改动Top.js,引入button菜单类

			uses : ['app.ux.ButtonTransparent', 'app.view.main.region.ButtonMainMenu'],

然后在items中增加

{
						xtype : 'buttonmainmenu'
					}

再改动Main.js，引入MainMenuTree 和 AccordionMainMenu，在items中增加

 

{
						xtype : 'mainmenutree',
						region : 'west', // 左边面板
						width : 250,
						split : true
					}, {
						xtype : 'mainmenuaccordion',
						region : 'west', // 左边面板
						width : 250,
						split : true
					},

经过以上处理，如今界面上会有4种类型的菜单。见下图：

版权声明：本文博主原创文章，博客，未经同意不得转载。