題外話

做一個專案要向完成對應的模組，肯定是先要有樹形選單結構，點選對應才dna跳轉到相應介面，在extjs中如何實現。是上週遇到的一個小問題，現在做做記錄

1. app目錄下建立data/menuData.json檔案（需要的選單格式）
   大致格式

...
"body": [
    {
      "menu": 1,
      "menuCode": "0001",
      "menuName": "系統管理",
      "enable": 1,
      "sortOrder": 1,
      "note": "系統管理",
      "parentMenuId"
 
: 0,
      "parentMenuCode": null,
      "menuLevel": 1,
      "authCategoryCode": "",
      "authCode": "",
      "moduleName": "", //跳轉路徑
      "childMenus": [{}，{}，{}]
...

1. 載入Menu資料

Ext.define('app.store.main.MenuStore', {
    extend:"Ext.data.TreeStore",
    alias: 'store.menuStore',
    //storeId:"menuStoreId",
 

    proxy: { //非同步載入資料
        // actionMethods: {
        //     read: "POST" //請求方式
        // },
        type: "ajax",
        url: "app/data/data.json", //本地檔案讀取
        noCache: false,
        //paramsAsJson: true,
        reader: { //渲染資料
            type: "json", //指定型別
            transform: { //回撥：處理資料。相當於ajax的success方法
 

                fn: function (data) {
                    if ( Ext.isEmpty(data) || Ext.isEmpty(data.body)) {
                        alert("沒有資料");
                    }
                    return Ext.Array.map(data.body, function (obj) { //map 鍵值對查詢遍歷
                        var tmp = {};
                        tmp.id = 'menus'+obj.menuCode; //顯示編號
                        tmp.text = obj.menuName; //顯示內容
                        tmp.moduleName = obj.moduleName; //跳轉地址
                        tmp.expanded=false, //是否伸展
                            tmp.children = [];
                        var children = obj.childMenus;
                        if (!Ext.Object.isEmpty(children)) {
                            tmp.children = Ext.Array.map(children, function (child) {
                                return {
                                    id:'menus'+child.menuCode,
                                    text:child.menuName,
                                    moduleName:child.moduleName,
                                    leaf:true //是否為葉子節點
                                };
                            });
                        }
                        return tmp;
                    });
                }
            }
        }
    },
    folderSort: true, //排序
    autoLoad: false //自動載入
});

1. 在主頁中顯示

Ext.define('report.view.main.region.Left', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.mainleft',
    title: '許可權管理',
    lines: false,
    rootVisible: false,
    /*border: false,  //邊框
     //隱藏根節點
     autoShow : true,*/
    store:Ext.create('app.store.main.MenuStore', {
        storeId: "menuStoreId" //如果將storeId設定在store中無法訪問，不知道怎麼回事
    }),
    initComponent: function () {
        var store = Ext.data.StoreManager.lookup("menuStoreId");//得到menuStore
        store.load();//載入選單
        this.callParent(arguments);
    }

});

Tab切換

1. 在首頁中新增點選邏輯MainController

 // 選擇了主選單上的選單後執行
    onMainMenuClick: function (menuitem) {
        var maincenter = this.getView().down('maincenter');
        var moduleName = menuitem.get('moduleName');
        var newTab = maincenter.getComponent(menuitem.get('id'));
        if (!newTab && menuitem.get('leaf')) {
            maincenter.setActiveTab(maincenter.add({
                xtype: Ext.create(moduleName,{
                    closable: true,
                    id: menuitem.get('id'),
                    reorderable: true,
                    title: menuitem.get('text')
                })
            }));
        } else { //如果tab中存在，那麼就直接將節點指向這個頁面
            maincenter.setActiveTab(newTab);
        }
    },

1. 左邊區域Left.js中監聽樹形選單的變化

listeners: { //點選樹形選單中間頁面產生變化
        itemclick: function (view, record, item, index, e, eOpts) {
            this.up('app-main').getController().onMainMenuClick(record);
        }
    }