ExtJS中的树型组件：简单创建与外观定制

“4.0Ext 树型结构：在ExtJS 4.0中，树型组件（Trees）是一种强大的工具，用于展示具有层级关系的数据。它与表格组件共享基础，可以支持诸如多列、尺寸调整、拖放、渲染和筛选等特性。” 在ExtJS框架中，树型结构（Trees）是一种用于呈现层次结构数据的灵活组件。它们与表格组件（Grids）有着共同的基类，因此许多表格的功能也可以应用到树型组件上。这包括但不限于多列布局、尺寸控制以适应不同屏幕尺寸，拖放操作以允许用户重新组织数据，以及渲染和筛选功能，帮助用户更有效地浏览和过滤信息。 创建一个基本的树型组件非常简单。以下是一个示例代码： ```javascript Ext.create('Ext.tree.Panel', { renderTo: Ext.getBody(), title: 'SimpleTree', width: 150, height: 150, root: { text: 'Root', expanded: true, children: [ { text: 'Child1', leaf: true }, { text: 'Child2', expanded: true, children: [{ text: 'Grandchild', leaf: true }] } ] } }); ``` 这段代码将在页面的body元素上渲染一个树面板。树的根节点（The Root Node）被设置为自动展开，这是默认行为。根节点有两个子节点，一个是叶子节点（leaf node），没有子节点；另一个节点则有一个孙子节点，其文本属性定义了节点在界面上显示的文字。 树型组件的数据通常存储在树存储器（TreeStore）中。在上述例子中，我们使用了内置的默认树存储器。另一种配置方式是先创建树存储器，然后将其赋值给树面板的`store`属性： ```javascript var store = Ext.create('Ext.data.TreeStore', { root: { text: 'Root', expanded: true, children: [ { text: 'Child1', leaf: true }, ] } }); Ext.create('Ext.tree.Panel', { title: 'SimpleTree', store: store }); ``` 树面板通过节点接口（The Node Interface）与树存储器进行绑定，存储器则是模型实例的集合。树节点是由NodeInterface封装的模型实例，提供了在树形控件中的特殊方法和属性。 为了改变树的外观，你可以调整一些配置选项。例如，设置`useArrows`为`true`将隐藏传统的展开/折叠线条，转而使用箭头图标。`rootVisible`配置项可以用来控制是否显示根节点，当设置为`false`时，根节点通常会被自动展开。此外，设置`lines`为`false`可以去掉节点间的连接线，使界面更加简洁。 ExtJS 4.0的树型结构提供了一种强大且灵活的方式来展示和操作层次化数据，其丰富的功能和自定义选项使得开发者可以根据需求构建出各种复杂的树形视图。