extjs 树刷新_ExtJS 4 树

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

让我们开始创建一个简单的树组件Ext.create('Ext.tree.Panel', {

renderTo: Ext.getBody(),

title: 'Simple Tree',

width: 150,

height: 150,

root: {

text: 'Root',

expanded: true,

children: [

{

text: 'Child 1',

leaf: true

},

{

text: 'Child 2',

leaf: true

},

{

text: 'Child 3',

expanded: true,

children: [

{

text: 'Grandchild',

leaf: true

}

]

}

]

}

});

运行效果如图

这个Tree Panel直接渲染在document.body上，我们定义了一个默认展开的根节点，根节点有三个子节点，前两个子节点是叶子节点，这意味着他们不能拥有自己的子节点了，第三个节点不是叶子节点，它有一个子节点。每个节点的text属性用来设置节点上展示的文字。

Tree Panel内部使用Tree Store存储数据。上面的例子中使用了root配置项作为使用store的捷径。如果我们单独指定store，代码像这样：var store = Ext.create('Ext.data.TreeStore', {

root: {

text: 'Root',

expanded: true,

children: [

{

text: 'Child 1',

leaf: true

},

{

text: 'Child 2',

leaf: true

},

...

]

}

});

Ext.create('Ext.tree.Panel', {

title: 'Simple Tree',

store: store,

...

});

The Node Interface 节点接口

上面的例子中我们在节点上设定了两三个不同的属性，但是节点到底是什么？前面提到，TreePanel绑定了一个TreeStore，Store在ExtJS中的作用是管理Model实例的集合。树节点是用NodeInterface装饰的简单的模型实例。用NodeInterface装饰Model使Model获得了在树中使用需要的方法、属性、字段。下面是个树节点对象在开发工具中打印的截图

关于节点的方法、属性等，请查看API文档(ps. 每一个学习ExtJS的开发者都应该仔细研读API文档，这是最好的教材)

Visually changing your tree 外观定制

先尝试一些简单的改动。把useArrows设置为true，Tree Panel就会隐藏前导线使用箭头表示节点的展开

设置rootVisible属性为false，根节点就会被隐藏起来：

Multiple columns 多列

由于Tree Panel也是从Grid Panel相同的父类继承的，因此实现多列很容易。var tree = Ext.create('Ext.tree.Panel', {

renderTo: Ext.getBody(),

title: 'TreeGrid',

width: 300,

height: 150,

fields: ['name', 'description'], //注意这里

columns: [{

xtype: 'treecolumn',

text: 'Name',

dataIndex: 'name',

width: 150,

sortable: true

}, {

text: 'Description',

dataIndex: 'description',