实现如下所示的效果：
这是一个viewport的经典border类型layout布局
左侧也就是west的panel是treePanel，这个panel的数据源是一个store，当treePanel的item被点击，会触发alert代码。
首先为我们viewport也就是treepanel所在的页面，添加一个Basic Event Binding如下图所示
然后为这个event binding配置属性：方法名fn和事件名itemclick，如下图
其中具体的代码为：
agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
var rid = "uselessStr";
rid = record.raw.id;
if (rid.indexOf("agent") != -1){
//包含agent字符串，所以什么也不做
//Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}else{
//不包含agent字符串，所以显示
Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}
}从上面的代码可以看到，我们需要获取treepanel中root节点下的children的id和text
所以我们要去看看treepanel对应的store中的对应数据
下面列举整个store的代码：
Ext.define('MyApp.store.LeftAgentStore', {
extend: 'Ext.data.TreeStore',
requires: [
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LeftAgentStore',
root: {
text: '代理店',
id: 'agent-root',
expanded: true,
children: [
{
text: '北京代理店',
id: 'agent-bj',
expanded: true,
children: [
{
text: '详细信息',
id: 'detailInfo-bj',
leaf: true
},
{
text: '团队',
id: 'groupInfo-bj',
leaf: true
},
{
text: '文件夹',
id: 'folderInfo-bj',
leaf: true
}
]
},
{
text: '上海代理店',
id: 'agent-sh',
expanded: true,
children: [
{
text: '详细信息',
id: 'detailInfo-sh',
leaf: true
},
{
text: '团队',
id: 'groupInfo-sh',
leaf: true
},
{
text: '文件夹',
id: 'folderInfo-sh',
leaf: true
}
]
}
]
},
fields: [
{
name: 'text'
}
]
}, cfg)]);
}
});我们可以看出来，我们在store的root中手动添加了树形菜单的全部数据，其中特别为每一个菜单项提供了id字段
然后我们的viewport中的event binding所创建的fn中特别判断了id的值，如果rid.indexOf("agent") != -1，也就是如果rid这个字符串中包含了agent这个字符串，那么说明不是叶子节点leaf，就什么也不做，如果不包含那么弹出alert窗体。
下面我们罗列所有的代码
主页代码
Ext.define('MyApp.view.MainVP', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainvp',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.tree.Panel',
'Ext.tree.View'
],
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'north',
height: 103,
itemId: 'topPanel',
title: 'PWST服务系统',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'topToolBar',
items: [
{
xtype: 'button',
itemId: 'agentBTN',
text: '代理店'
},
{
xtype: 'button',
itemId: 'orgBTN',
text: '组织'
}
]
}
]
},
{
xtype: 'treepanel',
region: 'west',
split: false,
itemId: 'leftAgentTree',
width: 150,
collapsed: false,
collapsible: true,
title: '导航栏',
store: 'LeftAgentStore',
viewConfig: {
},
listeners: {
itemclick: {
fn: me.agentTreeItemClick,
scope: me
}
}
},
{
xtype: 'treepanel',
region: 'west',
split: false,
hidden: true,
itemId: 'leftOrgTree',
width: 150,
collapsed: false,
collapsible: true,
title: 'PWST组织',
store: 'LeftOrgStore',
viewConfig: {
}
}
]
});
me.callParent(arguments);
},
agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
var rid = "uselessStr";
rid = record.raw.id;
if (rid.indexOf("agent") != -1){
//包含agent字符串，所以什么也不做
//Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}else{
//不包含agent字符串，所以显示
Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}
}
});store的完整代码之前已经提供
