ExtJS4.0.7 树组建treePanel简单介绍

来源：互联网发布：sql exists什么作用编辑：程序博客网时间：2024/05/03 06:54

ExtJS4 树组件

Tree

Ext.tree.Panel Ext.data.TreeExt.data.NodeInterfaceExt.data.TreeStoreExt.tree.View

相关的类有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事件lExt.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()});