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

这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于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,引入按钮菜单类

			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种类型的菜单。见下图：

跟我一起学extjs5(09--自定义菜单2),布布扣,bubuko.com