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


跟我一起学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),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。