EXTJS动态树型实现教程

"EXTJS动态树型实现教程" 在EXTJS框架中，动态树是一种常见的交互元素，常用于展示层级关系的数据。EXTJS提供了一种简单的方法来创建动态树，即通过异步加载数据的方式，使得树节点可以根据用户操作动态地获取和显示数据。以下是一个关于如何使用EXTJS实现动态树的详细步骤： 1. 创建树加载器（TreeLoader） `Ext.tree.TreeLoader` 是EXTJS中用于动态加载树节点数据的组件。在本例中，我们创建了一个名为 `treeLoader` 的实例，并设置了 `dataUrl` 属性，该属性指定了服务器端返回树节点数据的URL。例如：`dataUrl: "TreeServlet.do"`。 2. 创建根节点（Root Node） 根节点是树结构的起点，我们使用 `Ext.tree.AsyncTreeNode` 创建它。这个节点包含了必要的属性，如 `text`（节点文本）、`id`（节点ID）、`draggable`（是否可拖动）、`iconCls`（图标CSS类）等。在示例中，创建了一个名为“文件管理”的根节点。 3. 创建树面板（TreePanel） 树面板是显示树结构的容器，我们使用 `Ext.tree.TreePanel` 创建。配置项包括布局、标题、宽度、高度、动画效果、拖放支持、是否可折叠、自动滚动以及根节点和加载器。例如： ```javascript var tree = new Ext.tree.TreePanel({ layout: "fit", title: "<center>管理文档</center>", split: true, width: 200, height: 650, animate: false, enableDD: true, collapsible: true, autoScroll: true, root: root, loader: treeLoader }); ``` 4. 创建列模型（ColumnModel） 对于动态树中包含的表格部分，我们需要定义列模型。这里创建了一个名为 `cm` 的 `Ext.grid.ColumnModel` 实例，包含了ID、文件名称、路径和父ID四个列。 5. 创建数据存储器（Store） 数据存储器用于存储从服务器获取的数据，这里使用 `Ext.data.Store` 创建。设置 `url` 为服务器返回数据的接口地址，以及数据读取器 `JsonReader`，解析返回的JSON数据。例如： ```javascript var store = new Ext.data.Store({ url: "fileList.do", reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "root", idProperty: "id", fields: ["id", "filename", "url", "parentId"] }) }); ``` 6. 配置数据读取器（JsonReader） `JsonReader` 需要指定 `totalProperty`（总记录数）、`root`（数据数组的键名）以及字段映射。在上述代码中，数据的根节点被设置为 "root"，而字段映射则包括 "id"、"filename"、"url" 和 "parentId"。 7. 将数据存储器与列模型绑定到表格（Grid） 将创建的 `store` 和 `cm` 绑定到一个表格组件，以显示树中的数据。 通过以上步骤，我们成功地创建了一个动态树，树的节点可以根据需求从服务器端动态加载，提供了灵活的数据展现方式。此实现方法适用于需要展示层级关系且数据量较大的场景，如文件管理系统、组织架构展示等。