ExtJS表格与树控件使用详解

"extjs表格、树控件" 在EXTJS框架中，表格和树控件是两种常用的组件，用于展示和操作数据。本节主要介绍了EXTJS中的GridPanel（表格控件）和TreePanel（树控件）以及相关的数据存储和读取机制。 1. 表格控件 EXTJS的表格控件主要由GridPanel类实现，它具有丰富的功能，如排序、缓存、拖动、列隐藏、行号显示、列汇总和单元格编辑等。GridPanel是Panel的子类，它的xtype标识为'grid'。创建一个表格控件需要两个核心部分：列定义和数据存储器。 列定义通常通过ColumnModel类来实现，允许设置每一列的标题、宽度、对齐方式等属性。数据存储器则是由Store类定义的，用来管理表格的数据。EXTJS提供了多种类型的Store，如JsonStore、SimpleStore和GroupingStore，它们分别对应不同的数据解析方式。例如，JsonStore用于处理JSON格式的数据，SimpleStore则适用于简单的数组数据。 以下是一个简单的GridPanel实例： ```javascript Ext.onReady(function() { var data = [ [1, '任务管理系统', '3D', 'www.renwu.com'], [2, 'Blog系统', 'BJT', 'www.blog.org'], // ... ]; var store = new Ext.data.SimpleStore({ data: data, fields: ['id', 'name', 'type', 'url'] }); var grid = new Ext.grid.GridPanel({ store: store, cm: new Ext.grid.ColumnModel([ {header: 'ID', width: 50, dataIndex: 'id'}, {header: '名称', width: 100, dataIndex: 'name'}, {header: '类型', width: 100, dataIndex: 'type'}, {header: '网址', width: 200, dataIndex: 'url'} ]) }); grid.render('gridDiv'); }); ``` 在这个例子中，`data`数组是表格的数据源，`fields`定义了数据字段，而`ColumnModel`则定义了列的显示属性。 2. 可编辑的表格 - EditorGridPanel 对于需要编辑数据的场景，EXTJS提供了EditorGridPanel。这个类扩展了GridPanel，支持单元格级别的编辑。当用户点击某个单元格时，可以显示相应的编辑器进行数据修改。编辑完成后，更新会自动反映到数据存储器中。 3. 数据存储 - Store、Record和DataProxy - Record：数据记录类，代表了Store中的一条独立数据。 - Store：数据存储器，负责管理数据的加载、更新和删除。它可以连接到不同的数据源，如服务器端API。 - DataProxy：数据代理，作为Store与服务器之间的桥梁，负责数据的获取和提交。 4. 树控件 - TreePanel EXTJS的TreePanel用于展现层次结构的数据，它提供节点的展开、折叠、拖放等操作。TreePanel的基础是TreePanel类，配合TreeLoader可以动态加载子节点。TreeLoader允许设置URL，以便从服务器加载更多数据。 5. 自定义TreeLoader 有时需要自定义TreeLoader的行为，例如在加载数据前进行特定的处理或改变默认的请求参数。通过扩展TreeLoader类并覆盖其方法，可以实现这些定制需求。 EXTJS的表格和树控件提供了强大的数据展示和交互功能，通过灵活的数据存储和加载机制，能够适应各种复杂的Web应用需求。学习和掌握这些控件的使用，对于提升Web应用的用户体验和功能完善性具有重要意义。