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

题外话

做一个项目要向完成对应的模块，肯定是先要有树形菜单结构，点击对应才dna跳转到相应界面，在extjs中如何实现。是上周遇到的一个小问题，现在做做记录

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": [{}，{}，{}]
...

加载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 //自动加载
});

在主页中显示

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切换

在首页中添加点击逻辑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);
}
},

左边区域Left.js中监听树形菜单的变化

listeners: { //点击树形菜单中间页面产生变化
itemclick: function (view, record, item, index, e, eOpts) {
this.up('app-main').getController().onMainMenuClick(record);
}
}