Extjs4.1中treepanel的全部高级操作教程VIP专享

Ex tJS 4 树 先看个简单的效果图: Tree Panel 是Ex tJS 中最多能的组件之一，它非常适合用于展示分层的数据。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在Ex tJS中的作用是管理Model 实例的集合。树节点是用NodeInterface 装饰的简单的模型实例。用NodeInterface 装饰Model 使Model 获得了在树中使用需要的方法、属性、字段。下面是个树节点对象在开发工具中打印的截图 关于节点的方法、属性等，请查看 API 文档(ps. 每一个学习 ExtJS的开发者都应该仔细研读 API 文档，这是最好的教材) Visually changing your tree 外观定制 先尝试一些简单的改动。把 useArrows 设置为 true，Tree Panel就会隐...