ExtJS4.2 TreeGrid 的用法

来源：互联网发布：h5万能表单系统源码编辑：程序博客网时间：2024/04/30 22:33

ExtJS TreeGrid 的用法

TreeGrid 就是在Grid中显示类似Tree的结构，例如：

在ExtJS 4.x版本中，该功能已经包含在了TreePanel中，所以我们可以方便的使用。我代码中使用的是目前最新版本的ExtJS 4.2

首先需要定义Model。通常我们的Model都是从Ext.data.Model继承，现在我们需要继承自 Ext.data.TreeModel

Ext.define("DeptModel", {    extend: "Ext.data.TreeModel",    fields: [        "DeptName", "Leader"    ]});

然后是Store，使用TreeStore就可以了：

var store = Ext.create("Ext.data.TreeStore", {    model: "DeptModel",    root: {        expanded: true,        DeptName: "总公司",        Leader: "Lin",        children: [            { DeptName: "技术部", Leader: "Xia", leaf: true },            { DeptName: "财务部", Leader: "Li", leaf: true }        ]    }});

我们默认已经为Store指定了数据项，在实际的项目中多半是要使用ajax代理读取服务器端数据的。

有了Model 和Store，就可以使用TreeGrid了：

var viewport = Ext.create("Ext.container.Viewport", {    layout: "auto",    items: [        {            xtype: "treepanel",            itemId: "tree",            width: 600,            height: 500,            store: store,            columns: [                {                    xtype: 'treecolumn',                    text: '部门',                    dataIndex: "DeptName",                    flex: 1,                    sortable: false                },                {                    text: "领导",                    dataIndex: "Leader",                    flex: 1,                    sortable: false                }            ]        }    ]});

注意代码中高亮显示的部分，此处是显示树节点的列。这样运行程序就能够得到我们开头看到的TreeGrid效果了。

本文转载自：ExtJS TreeGrid的用法

1 0