此篇treepanel的描写是很简单，没有太大的难度，在学习时，可以先熟悉tree的一些配置信息、属性、方法和事件。
然后先写一个简单的例子，慢慢了解从中如何实现的，然后在慢慢的深入了解，实现一些复杂的效果。
在实现此效果的同时，发现一个问题，就是如果节点的id设置相同，tree首次展现是没有问题，但点击节点展开和收缩会发现数据在莫名其妙的增加，
同时节点会出现混乱的状况，如果用户同时又单击节点，触发其他效果的，严重可能会导致浏览器崩溃。在此要留意数据id不能重复。
以下就开始贴出实现的代码：
Ext.onReady(function(){
// Ext.Msg.alert("提示","hello world")
var treeData = [
{id:"1001",name:"wind",tel:"18603071234"}, {id:"1002",name:"小月",tel:"18603073578"},
{id:"1003",name:"冷清雪",tel:"18603073569"}, {id:"1004",name:"布隆",tel:"18603073214"},
{id:"1005",name:"莫甘娜",tel:"18603072568"}, {id:"1006",name:"阿里",tel:"18603073247"},
{id:"1007",name:"阿卡丽",tel:"18603071563"}, {id:"1008",name:"卡特",tel:"18603071234"},
{id:"1009",name:"死歌",tel:"18603071234"},
]
var children = []
for(var i in treeData)
{
children.push({ text: treeData[i].name, id: treeData[i].id, leaf: true });
}
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
text:"活动",
id: 0,
expanded: true, //设置节点展开
children: children
}
});
//创建TreePanel
var treePanelObj = Ext.create("Ext.tree.Panel", {
region: "west",
header: false,
border: false,
height:500,
autoScroll: true,
animate: true,
rootVisible: true, //设置根节点显示
collapsible: true,
// cls: "GridTree",
// style:"margin-top:0px;",
store: treeStore,
listeners:{
itemclick: function (view, record, item, index, e, eOpts) {
// 单击节点事件，包括根节点
// 此处代码自己可以实现。。。
},
load:function(){
// 此处可以设置节点默认被选中
}
}
});
//选中后激活itemclick事件里的内容需要 绑定select事件才可以
var treeRecord = treePanelObj.getRootNode().getChildAt(0);
var id = treeRecord.data.id;// 获取节点ID数据
//设置选中节点被选中状态
treePanelObj.getSelectionModel().select(treeRecord, false, false);
var win = Ext.create("Ext.window.Window",{
width:400,
height:500,
id:"MyTreeWindow",
title:"Tree菜单显示",
items:treePanelObj
});
win.show();
});
显示效果：
异常原因：
如果展开和收缩节点，出现节点混乱问题，先确定节点的id是否唯一