【工作笔记】从零开始学ExtJs6( 四）—— 首页树状菜单和Tab页的实现

题外话

做一个项目要向完成对应的模块，肯定是先要有树形菜单结构，点击对应才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);
        }
    }