跟我一起学extjs5(08--自定义菜单1)

跟我一起学extjs5(08--自定义菜单1)

顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单。由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时候,和MainModel中的其他数据一样,将会通过ajax加载要显示的菜单数据,然后生成菜单条或者菜单树。在这个例子中,我只做了二层菜单,要做三层以上的只要稍作修改即可。

下面先来看看菜单数据的定义:在MainModel中,在data属性下定义一个systemMenu的数组属性,下面就放了各个菜单项和菜单条的数据定义。

				// 系统菜单的定义,这个菜单可以是从后台通过ajax传过来的
				systemMenu : [{
							text : '工程管理', // 菜单项的名称
							icon : '', // 菜单顶的图标地址
							glyph : 0,// 菜单项的图标字体的数值
							expanded : true, // 在树形菜单中是否展开
							description : '', // 菜单项的描述
							items : [{
								text : '工程项目', // 菜单条的名称
								module : 'Global', // 对应模块的名称
								icon : '', // 菜单条的图标地址
								glyph : 0xf0f7
									// 菜单条的图标字体
								}, {
								text : '工程标段',
								module : 'Project',
								icon : '',
								glyph : 0xf02e
							}]

						}, {
							text : '合同管理',
							expanded : true,
							items : [{
										text : '项目合同',
										module : 'Agreement',
										glyph : 0xf02d
									}, {
										text : '合同付款计划',
										module : 'AgreementPlan',
										glyph : 0xf03a
									}, {
										text : '合同请款单',
										module : 'Payment',
										glyph : 0xf022
									}, {
										text : '合同付款单',
										module : 'Payout',
										glyph : 0xf0d6
									}, {
										text : '合同发票',
										module : 'Invoice',
										glyph : 0xf0a0
									}]
						}, {
							text : '综合查询',
							glyph : 0xf0ce,
							expanded : true,
							items : [{
										text : '项目合同台帐',
										module : 'Agreement',
										glyph : 0xf02d
									}, {
										text : '合同付款计划台帐',
										module : 'AgreementPlan',
										glyph : 0xf03a
									}, {
										text : '合同请款单台帐',
										module : 'Payment',
										glyph : 0xf022
									}, {
										text : '合同付款单台帐',
										module : 'Payout',
										glyph : 0xf0d6
									}, {
										text : '合同发票台帐',
										module : 'Invoice',
										glyph : 0xf0a0
									}]

						}

				]

上面菜单中定义了三个菜单项,若干个菜单条,具体的属性上面有说明。有了菜单数据,再编制一个可以根据这些数据生成菜单展示数据的函数,这个函数返回的数组可以直接供toolbar和button作为items和menu来使用。下面这个函数也是在MainModel.js中。

			// 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据
			getMenus : function() {
				var items = [];
				var menuData = this.get('systemMenu'); // 取得定义好的菜单数据
				Ext.Array.each(menuData, function(group) { // 遍历菜单项的数组
							var submenu = [];
							// 对每一个菜单项,遍历菜单条的数组
							Ext.Array.each(group.items, function(menuitem) {
										submenu.push({
													mainmenu : 'true',
													moduleName : menuitem.module,
													text : menuitem.text,
													icon : menuitem.icon,
													glyph : menuitem.glyph,
													handler : 'onMainMenuClick' // MainController中的事件处理程序
												})
									})
							var item = {
								text : group.text,
								menu : submenu,
								icon : group.icon,
								glyph : group.glyph
							};
							items.push(item);
						})
				return items;
			}

下面继承toolbar自定义一个菜单条的控件。在war/app/view/main/region目录下建立文件MainMenuToolbar.js。

/**
 * 系统的主菜单条,根据MainModel中的数据来生成,可以切换至按钮菜单,菜单树
 */
Ext.define('app.view.main.region.MainMenuToolbar', {
			extend : 'Ext.toolbar.Toolbar',
			alias : 'widget.mainmenutoolbar',

			defaults : {
				xtype : 'buttontransparent'
			},

			items : [{
						glyph : 0xf100,
						tooltip : '在左边栏中显示树状菜单', // 几种菜单样式切换的按钮
						disableMouseOver : true,
						margin : '0 -5 0 0'
					}, {
						glyph : 0xf102,
						tooltip : '在顶部区域显示菜单',// 几种菜单样式切换的按钮
						disableMouseOver : true
					}],

			viewModel : 'main', // 指定viewModel为main

			initComponent : function() {

				// 把ViewModel中生成的菜单items加到此toolbar的items中
				this.items = this.items.concat(this.getViewModel().getMenus());

				this.callParent();
			}
		});

至此菜单条控件制作完成,下面要把其加入到Main的界面之中。首先在Main.js的uses之中引入

‘app.view.main.region.MainMenuToolbar‘,然后在items中将菜单toolbar加进去。

			items : [{
						xtype : 'maintop',
						region : 'north' // 把他放在最顶上
					}, {
						xtype : 'mainmenutoolbar',
						region : 'north' // 把他放在maintop的下面
					}, {
						xtype : 'mainbottom',
						region : 'south' // 把他放在最底下
					}, {
						region : 'center', // 中间面版
						xtype : 'maincenter'
					}]

一个菜单条就加入到了系统之中,来看一下效果。

系统中我共设置了4种类型的菜单,分别是:

  • 菜单按钮:在顶部的“菜单”按钮之下。
  • 菜单条:在顶部区域下面,刚做好的那个就是。
  • 菜单树:显示在左边区域的菜单树。
  • 折叠式菜单:显示在左边区域的另一种方式。

这几种菜单之间可以很方便的切换,如果认为太多了没必要,可以把不喜欢的取消掉。所有的界面都是用控件搭起来的,所以要增加一种菜单风格或取消一种都很方便。

跟我一起学extjs5(08--自定义菜单1)

时间: 2024-11-03 05:34:23

跟我一起学extjs5(08--自定义菜单1)的相关文章

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A

跟我一起学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.buttonma

跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])

跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理"下,看到 "销售合同"的菜单条了,点击一下,看看结果吧. 以上是自动生成"销售合同"的模块界面,这个就是最初介绍的模块的列表.

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样.在上一节中建立了四个模块,下面开始设计前后台的交互.将系统信息和模块.菜单信息传到前台,由前台来进行展示. 首先新建一个java bean类用来存放各种需要传到前台的数据,里面包括:系统信息.操作人员信息.服务人员信息.模块信息.菜单.现在只加入了这几个,以后还要加入各种 各样的权限设置.在com.jfok.server.co

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表])

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表]) 下面我们开始进入自定义系统的设计和各个组成部分的搭建工作. 首先在sql server中建立数据库,这里的数据的名字我定义为extjs5,然后需要建立模块的定义表,这个表里将存着系统中所有模块的定义信息.为了能有个直观的前后台的互动,先把模块和菜单这二个部分加进去,可以把菜单数据组织好后发送到前台去进行展示. 由于系统中的模块很多,需要分类,因此在先要设计一个"模块分组"的表,对于菜单也是一样,需要有一个&quo

跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean])

跟我一起学extjs5(29--加入模块和菜单定义[2建立java bean]) 对上一节中加入的4个模块在java中建立相应的bean文件. 以上表建立好以后,需要建立java bean文件.在建立之前需要加入几个支持类. 先在com.jfok.server.common中建立包annotation,再在下面加入二个类库,这二个是自定义的注释类.分别用来注释每一个模块的信息和模块中每一字段的信息. package com.jfok.server.common.annotation; impor

跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])

跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块]) 前几节处理好了后台,现在又要处理前台了.首先是要修改菜单的选择事件,在创建一个module的时候将 moduleName参数传递进去. 修改MainController.js中的函数: // 选择了主菜单上的菜单后执行 onMainMenuClick : function(menuitem) { var maincenter = this.getView().down('maincenter'); maincenter

跟我一起学extjs5(22--模块Form的自定义的设计)

跟我一起学extjs5(22--模块Form的自定义的设计) 前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1?可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能: 2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改. 3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer).

跟我一起学extjs5(23--模块Form的自定义的设计[1])

跟我一起学extjs5(23--模块Form的自定义的设计[1]) 下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段. // 模块的form方案,可以定义多个方案 tf_for