ExtJS5 实现树形菜单
首先利用sencha建立extjs的工程，然后是对页面顶部和底部布局的添加以及按钮的美化，因为只要记录的是菜单的生成，就不记录了。
具体工程我会上传，因为是自己练练手的东西，所以写的很杂。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
接下来开始建我们的树形菜单。
首先在mainmodel.js的data中增加数据。
NavigationMenu : [{
text : '工程管理', // 菜单项的名称
icon : '', // 菜单顶的图标地址
glyph : 0,// 菜单项的图标字体的数值
expanded : true, // 在树形菜单中是否展开
description : '', // 菜单项的描述
items : [{
text : '工程项目', // 菜单条的名称
module : 'Global', // 对应模块的名称
icon : '', // 菜单条的图标地址
glyph : 0xf0f7
// 菜单条的图标字体
}, {
text : '工程标段',
module : 'Project',
icon : '',
glyph : 0xf02e
}]
}, {
text : '合同管理',
expanded : true,
items : [{
text : '项目合同',
module : 'Agreement',
glyph : 0xf02d
}, {
text : '合同付款计划',
module : 'AgreementPlan',
glyph : 0xf03a
}, {
text : '合同请款单',
module : 'Payment',
glyph : 0xf022
}, {
text : '合同付款单',
module : 'Payout',
glyph : 0xf0d6
}, {
text : '合同发票',
module : 'Invoice',
glyph : 0xf0a0
}]
}, {
text : '综合查询',
glyph : 0xf0ce,
expanded : true,
items : [{
text : '项目合同台帐',
module : 'Agreement',
glyph : 0xf02d
}, {
text : '合同付款计划台帐',
module : 'AgreementPlan',
glyph : 0xf03a
}, {
text : '合同请款单台帐',
module : 'Payment',
glyph : 0xf022
}, {
text : '合同付款单台帐',
module : 'Payout',
glyph : 0xf0d6
}, {
text : '合同发票台帐',
module : 'Invoice',
glyph : 0xf0a0
}]
}]
随后，新建mainmenutree.js的视图，用于编写菜单。
mainmenutree.js继承自Ext.panel.Panel，使用initComponent 方法扩展组件，同时在使用initComponent 时必须要调用this.callParent()，否则会导致不能初始化。
随后在initComponent方法中进行操作。
1、获得当前view对象
Var me = this;
2、获得在model中定义的数据集
Var menus = this.getViewModel().get('NavigationMenu');
3、循环该数据集，遍历所有items对象。
（对于一层树形菜单，只有一个根节点，其他均为叶子节点；对于多层树形菜单而言，存在一个根节点，多个节点和叶子节点。使用递归的思想，一棵树可以是另一棵树的子节点。）
for(var i in menus){
var menugroup = menus[i]; //取得一个组
var groupPanel = Ext.create('Ext.tree.TreePanel',{
expanded:false,
store:makeTreeStore(menugroup),
listeners:{
select:'onclickListener'
}
});
me.items.push(groupPanel)
}
4、对3中的store操作，即得到一个组的完整的树。然后把这个数当做根节点上的一部分添加上去。
function makeTreeStore(group){
var storeTree = Ext.create('Ext.data.TreeStore',{
root:{
text:group.text,
expanded:false,
id:group.text
}
});
var root = storeTree.getRootNode();
var menuItems = group.items;
for(var i in menuItems){
var item = menuItems[i];
var childNode = Ext.apply({},{
text:item.text,
leaf:1,
moduleId:item.module,
moduleName:item.text
});
root.appendChild(childNode);
}
return storeTree;
}=
至此，已经可以完成页面的展示了，接下来我们进行点击事件的监听
在步骤三中我们定义了Listener监听事件，随后在controller.js中完成这个时间的逻辑处理。
onclickListener : function(tree,record,index,eOpts){
if(index!=0){
if("Global"===(record.get('moduleId'))){
//根据ID去取得组件
var centerPanel = Ext.getCmp('center-panel');
//动态创建新视图(create使用全名,widget使用xtype)
var Global = Ext.create('app.view.demo1.demo1view');
//移除组件上的视图
centerPanel.removeAll(true);
//将新视图添加
centerPanel.add(Global);
//更改标题
var title = record.get('text');
centerPanel.setTitle(title);
} else if("Global"===(record.get('moduleId'))){
//其他判断
}else{
Ext.Msg.alert("错误 ","该视图不存在");
}
}
}