一般情况下,都是从数据库中获取树的节点。此种情况下可能数据是经常需要维护的,增删改查。如短信目录,物品管理之类的情况,但是也有一些情况是一些固定数据,所以就不用去实现一个动态的异步树。
下面写个简单的列子:
var json =[{'text':'A,'id':'11','leaf':false,
'children':[{'text':'A1,'id':'1','leaf':true},
{'text':'A2','id':'2','leaf':true}]},
{'text':'B,'id':'22','leaf':false,
'children':[{'text':'B1,'id':'3','leaf':true},
{'text':'B2,'id':'4','leaf':true},
{'text':'B3,'id':'5','leaf':true},
{'text':'B4,'id':'6','leaf':true}]}]; 需求者可以相应实现自己需要实现的树状结构的节点数据。
树面板对象
xinli.ui.HistoryTreePanel= Ext.extend(Ext.tree.TreePanel, {
prodInstId : null,
initComponent : function() {
var prodInstId = this.prodInstId;
Ext.apply(this, {
region : 'west',
width : 200,
minSize : 200,
maxSize : 250,
border : true,
frame : false,
rootVisible : true,
autoScroll : true,
autoHeight : false,// 自动高
containerScroll : true,
split : true,
root : new Ext.tree.AsyncTreeNode({
id : '1',
text : '根目录,
expanded : true,
children : json
}),
loader : new Ext.tree.TreeLoader(
)
});
xinli.ui.HistoryTreePanel.superclass.initComponent.call(this);
this.addListener('click', function(node) {
do something........代码略
}, this);
}
});
通过上面的代码,我们可以实现一个树。节点数据通过读取固定配置好的json串来实现一个树面板对象。