extjs表格、树控件

### ExtJS表格、树控件知识点详解 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在ExtJS框架中，`GridPanel` 是实现表格功能的核心组件，它继承自 `Panel` 类，具有丰富的功能如排序、缓存、拖拽列、隐藏列、自动显示行号、列汇总以及单元格编辑等功能。 **配置参数详解**： - **`columns`**: 定义表格列的信息。通过 `Ext.grid.ColumnModel` 类定义，包含每列的标题 (`header`) 和对应的数据索引 (`dataIndex`)。 - **`store`**: 数据源，通过 `Ext.data.Store` 类定义。`GridPanel` 必须绑定一个数据存储器来提供数据支持。 - **`autoExpandColumn`**: 指定某列自动扩展宽度，通常设置为需要显示较多文本的列的索引值。 - **其他配置项**：`height`, `width`, `title` 分别定义了表格的高度、宽度和标题。 **示例代码**： ```javascript Ext.onReady(function(){ var data = [ [1, '任务管理系统', '3D', 'http://www.renwu.com'], [2, 'Blog系统', 'BJT', 'http://www.blog.org'], [3, 'Ext管理系统', '3d', 'http://www.Extrw.com'], [4, '中流网', 'ZLW', 'http://www.zlweb.cn'] ]; var store = new Ext.data.SimpleStore({ data: data, fields: ["id", "name", "organization", "homepage"] }); var grid = new Ext.grid.GridPanel({ renderTo: "hello", title: "NetJava表格测试", height: 150, width: 600, columns: [ { header: "项目名称", dataIndex: "name" }, { header: "开发团队", dataIndex: "organization" }, { header: "网址", dataIndex: "homepage" } ], store: store, autoExpandColumn: 2 }); }); ``` #### 可编辑的表格 `EditorGridPanel` ##### 1.2 可编辑的表格 `EditorGridPannel` `EditorGridPanel` 继承自 `GridPanel`，主要特点在于提供了单元格级别的编辑功能。 **配置参数详解**： - **`editEvent`**: 触发编辑操作的事件类型，默认为 `click`。 - **`clicksToEdit`**: 需要点击几次才能进入编辑状态，默认为 1 次。 **示例代码**： ```javascript Ext.onReady(function(){ var data = [ // 数据省略 ]; var store = new Ext.data.SimpleStore({ data: data, fields: ["id", "name", "organization", "homepage"] }); var grid = new Ext.grid.EditorGridPanel({ renderTo: "hello", title: "NetJava表格测试", height: 150, width: 600, columns: [ { header: "项目名称", dataIndex: "name" }, { header: "开发团队", dataIndex: "organization" }, { header: "网址", dataIndex: "homepage" } ], store: store, autoExpandColumn: 2 }); }); ``` #### 与服务器交互 `GridPanel` 可以通过配置 `store` 的 `proxy` 属性来与服务器进行数据交互。 **配置参数详解**： - **`proxy`**: 用于定义数据获取方式。例如，可以通过 `Ajax` 请求来获取远程数据。 - **`reader`**: 用于定义如何解析服务器返回的数据。 - **`writer`**: 用于定义如何将客户端数据序列化发送到服务器。 **示例代码**： ```javascript var store = new Ext.data.JsonStore({ url: 'data.json', root: 'rows', id: 'id', fields: ['id', 'name', 'organization', 'homepage'], proxy: new Ext.data.HttpProxy({ type: 'GET', url: 'data.json' }), reader: new Ext.data.JsonReader({ root: 'rows', totalProperty: 'total' }) }); ``` #### 数据存储 `Store` `Store` 是 ExtJS 中用于存储数据的核心组件，支持多种类型的数据源，包括 `JsonStore`, `SimpleStore`, `GroupingStore` 等。 **`SimpleStore` 示例代码**： ```javascript var data = [ // 数据省略 ]; var store = new Ext.data.SimpleStore({ data: data, fields: ["id", "name", "organization", "homepage"] }); ``` #### 树控件 `TreePanel` ##### 5.1 基本应用 `TreePanel` 是用于显示层次结构数据的组件，广泛应用于文件系统或组织架构的展示。 **配置参数详解**： - **`root`**: 树的根节点。 - **`loader`**: 负责加载子节点数据的加载器。 **示例代码**： ```javascript var tree = new Ext.tree.TreePanel({ renderTo: 'tree-example', title: 'Tree Example', width: 300, root: new Ext.tree.AsyncTreeNode({ text: 'Root Node', expanded: true, loader: new Ext.tree.TreeLoader({ dataUrl: 'data.json' }) }) }); ``` ##### 5.2 事件处理 `TreePanel` 提供了一系列事件处理机制，如节点展开、关闭等。 **示例代码**： ```javascript tree.on('beforenodeexpand', function(node, eOpts) { console.log('Before node expand:', node.text); }); tree.on('nodeexpand', function(node, eOpts) { console.log('Node expanded:', node.text); }); ``` ##### 5.3 树加载器 `TreeLoader` `TreeLoader` 用于异步加载树节点数据。 **配置参数详解**： - **`dataUrl`**: 加载数据的URL地址。 - **`requestMethod`**: HTTP请求方法，如 GET 或 POST。 **示例代码**： ```javascript var loader = new Ext.tree.TreeLoader({ dataUrl: 'data.json', requestMethod: 'GET' }); ``` ##### 5.4 自定义 `TreeLoader` 可以根据需求自定义 `TreeLoader` 的行为。 **示例代码**： ```javascript var loader = new Ext.tree.TreeLoader({ load: function(node, callback, scope) { // 自定义加载逻辑 Ext.Ajax.request({ url: 'data.json', success: function(response, opts) { var obj = Ext.decode(response.responseText); node.appendChild(obj.children); if (callback) { callback.call(scope || this, node, obj); } }, failure: function(response, opts) { console.log('server-side failure with status code ' + response.status); } }); } }); ``` ### 总结 通过本文，我们深入了解了ExtJS框架中 `GridPanel` 和 `TreePanel` 控件的使用方法及其相关配置。这些控件不仅能够提供强大的数据展示功能，还支持丰富的交互操作，是构建现代化Web应用不可或缺的一部分。希望本文能帮助大家更好地掌握这些重要概念和技术细节。