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

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

        上面设计好了一个模块的主界面，以下通过菜单命令的运行来把这个模块增加到主界面其中。

在MainModule.js中有一个函数。生成了当前的菜单数据：

			// 依据data.systemMenu生成菜单栏和菜单button以下使用的菜单数据
			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;
			}

其中的  handler : 'onMainMenuClick',就是在点击了菜单以后。去运行 MainController.js中的 onMainMenuClick 函数。改动一下MainController.js 文件。先引入Module.js

			uses : ['app.view.module.Module'],

再改动里面的函数：

			// 选择了主菜单上的菜单后运行
			onMainMenuClick : function(menuitem) {
				var maincenter = this.getView().down('maincenter');

				maincenter.setActiveTab(maincenter.add({
							xtype : 'modulepanel',
							closable : true,
							reorderable : true
						}));
			}

这样每单击一次菜单，都会生成一个Module,并把他放到tabPanel之中去。

        以下再看看tabPanel之中的还有一个功能。在tab上点右键，会有一个弹出式菜单。

        这里面有一些功能能够使用，可关闭，表示当前tab能够被关掉，在名字上方有一个Ｘ，假设取消可关闭，Ｘ就会消失，另外登录时自己主动打开和最多打开的功能如今还没做好。