2-2-树.docVIP

树Trees) 树是在ExtJS里面最多彩缤纷的组件之一，用于显示层次状明显的数据来说十分适合。树跟都是来自同一个基类的，扩展或者插件都可以用。比如多列、尺寸控制、拖放、渲染和筛选这些功能。 让我们开始创建一个颗非常简单的树。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, expanded: true, children: [{text: Grandchild,leaf: true}] } ] } }); 此树面板渲染到document.body元素上。我们把定义的根节点（TheRootNode）自动扩张开来，这是默认的情况。根节点有个子节点 ，是节点，子节点。第个节点叶节， text属性是节点的显示的文本。 树面板的数据存储在TreeStore)。上面的例子使用内部缺省的。另外配置： var store = Ext.create(Ext.data.TreeStore, { root: { text: Root, expanded: true, children: [ {text: Child 1,leaf: true}, ... ] } }); Ext.create(Ext.tree.Panel, { title: Simple Tree, store: store, ... }); 节点接口The Node Interface) 树面板绑定到而是实例的集合。树节点NodeInterface封装的模型实例。在树控件的状态下，有新的方法与属性。 改变树的外观 在你设置useArrows配置项为true的时候，树面板会隐藏旁边的线条，而采用图标箭头表示展开和折叠。 设置根节点的rootVisible 可决定根节点显示与否。通过这样做的话，一般就是根节点会自动扩大。图显示，rootVisible 设置为false，并设置lines为 false 的时候看不见线的树。 多列Multiple columns) 树面板跟面板同基类，所以构成多列是非常轻松的。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,flex: 1, sortable: true} ], root: { name: Root, description: Root description, expanded: true, children: [ {name: Child 1,description: Description 1,leaf: true}, {name: Child 2,description: Description 2,leaf: true} ] } }); 和面板面板也是通过columns数组进行配置。唯一区别在于面板至少xtype是“treecolumn”的。该类型的列根据树而设计的，拥有深度depth)、线条lines)、展开与闭合图标等的特性。典型的Tree面板是一个单独的“treecolumn”。 配置项fields会由内部的Store被复制到Model上请注意dataIndex配置项就是映射到field的。 应该提出，当未定义列的时候，树会自动创建