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