ExtJS4.0.7 树组建treePanel简单介绍

最新推荐文章于 2025-07-03 14:42:13 发布

原创最新推荐文章于 2025-07-03 14:42:13 发布 · 9.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #homework #tree #function #object #ui

Web View 专栏收录该内容

23 篇文章

订阅专栏

本文主要介绍了ExtJS4中的树组件TreePanel，包括其与Tree、NodeInterface、TreeStore和View的关系。TreePanel用于展示树形结构数据，并且能够绑定TreeStore，同时支持设置多列展示。

ExtJS4 树组件

Tree

Ext.tree.Panel Ext.data.Tree Ext.data.NodeInterface Ext.data.TreeStore Ext.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事件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()
});