相关的类有Panel,Tree, NodeInterface,TreeStore,View。从treePanel看起,treePanel主要提供树结构数据的UI展现。一个TreePanel必须绑定一个TreeStore。TreePanel支持通过列配置多个列。
树节点NodeInterface 提供配置项:
allowDrag:是否允许拖拽
expandable:是否允许折叠
expanded:是否展开
leaf:是否是叶子
isFirst:
isLast:
loaded:
loading:
root:根
text:文本……
//树节点配置[root>>children]每个节点有: text显示文本, leaf是否是叶子, expanded是否展开,等属性。 var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "tickets", leaf: true } ] } }); //创建TreePanel rootVisible表示根节点是否显示 Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody() });
//不需要每个参数一一解释,要注意的是每个参数都有一个默认值,没有明确配置的时候,使用的是默认值。 //树节点的Itemclick事件l Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, listeners: { itemclick:function(view,record,item,index,e,eOpts){ // 从record item index 等参数中我们可以获得大部分满足我们应用的信息 if(record.get('text')=='book'){// do somethings……}; if(record.get('text')=='detetion'){//do something……} } } renderTo: Ext.getBody() });