ExtJS4.2 TreeGrid 的用法

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的用法