跟我一起學extjs5(13--執行功能表命令在tabPanel中顯示模組)

標籤：extjs5   sencha   開發經驗   

跟我一起學extjs5(13--執行功能表命令在tabPanel中顯示模組)        上面設計好了一個模組的主介面，下面通過功能表命令的執行來把這個模組加入到主介面當中。在MainModule.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;}

        其中的  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可以被關掉，在名字上方有一個Ｘ，如果取消可關閉，Ｘ就會消失，另外登入時自動開啟和最多開啟的功能現在還沒做好。