ExtJS 4 树

Tree Panel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。Tree Panel和Grid Panel继承自相同的基类，所以所有从Grid Panel能获得到的特性、扩展、插件等带来的好处，在Tree Panel中也同样可以获得。列、列宽调整、拖拽、渲染器、排序、过滤等特性，在两种组件中都是差不多的工作方式。

让我们开始创建一个简单的树组件

首先创建Store:

var treeStore = Ext.create('Ext.data.TreeStore', {              proxy: {                  type: 'ajax',                  url: 'grade.htm?getAllGrades'              },              root: {                  text: 'name',                  id: 'id',                  expanded: true,                  leaf:true              },              folderSort: true,              sorters: [{                  property: 'id',                  direction: 'ASC'              }]          });

表1 Ext.data.TreeStore主要配置项

配置项	参数类型	说明
clearOnLoad	Boolean	设置加加载节点数据时,是否清楚前一次加载的数据,默认为true
defaultRootId	String	设置默认的根节点id,默认为root
defaultRootProperty	String	设置默认的根属性
nodeParam	String	异步加载节点时的参数名称,默认为node