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

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

时间:2014-07-02 16:38:03      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:extjs5   sencha   开发经验   


跟我一起学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种类型的菜单。见下图:

bubuko.com,布布扣



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

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

标签:extjs5   sencha   开发经验   

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

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