ExtJS Grid控件使用详解与技巧

EXTJS表格控件，GRID是EXTJS框架中的核心组件之一，用于展示大量结构化数据，并提供了丰富的功能和自定义选项。以下是对EXTJS GRID使用技巧和详细技术点的解析： 1. **数据模型（Data Model）与存储（Store）** - EXTJS Grid的核心是EXT.data.Store对象，它作为数据模型，负责管理数据源。Store可以接收各种类型的数据，如二维数组、JSON对象或XML数据，并通过适配器（Reader）进行解析。 - 在上述例子中，二维数组`data`被用来初始化Store，使用`MemoryProxy`来处理内存中的数据。数组数据通过`ArrayReader`读取，其中`mapping`属性指定每个字段在数组中的位置。 2. **列模型（Column Model）** - ColumnModel定义了Grid的列结构，包括列的标题（header）和数据绑定（dataIndex）。在例子中，创建了一个包含四列的ColumnModel，每一列对应数据源中的'id'、'sex'、'name'和'descn'字段。 - `defaultSortable`属性默认开启，表示所有列都可排序。若只需特定列可排序，可在列配置中单独设置`Sortable: true`。 3. **Grid实例化** - 创建Grid时，需要传入ColumnModel和Store实例，例如： ```javascript var grid = new Ext.grid.GridPanel({ store: store, cm: cm, // 其他配置项... }); ``` - 可以添加额外的配置项，如列宽、行高、行选择模式等。 4. **数据加载与刷新** - Store可以通过`load`方法异步加载数据，通常配合AjaxProxy使用。 - 要更新Grid数据，只需修改Store的数据源，Grid会自动响应并更新视图。 5. **排序与过滤** - Grid的列点击可以实现默认的排序，通过`sortable`属性控制。 - 使用Store的`sort`方法可手动排序，可以指定字段名和排序方向。 - 过滤数据可以利用Store的`filter`方法，或者使用FilterModel进行复杂过滤。 6. **分页** - 如果数据量大，可以使用Paging Toolbar和PageProxy进行分页显示。 - 设置`pageSize`和`remoteSort`属性，配合Ajax请求实现服务器端分页。 7. **编辑功能** - Grid可以配置为可编辑，使用CellEditing或RowEditing插件，允许用户直接在单元格中修改数据。 8. **其他高级功能** - Grouping：将数据按特定字段进行分组。 - Summary：提供列的总计或统计信息。 - Locking：锁定列以保持关键信息固定。 - Hiding：隐藏或显示列以调整界面。 - Drag & Drop：允许行拖放操作。 - Column Resizing：用户可以调整列宽。 EXTJS Grid提供了丰富的API和插件，可以满足各种复杂的业务需求。通过深入理解并灵活运用这些特性，开发者可以创建出功能强大、用户体验良好的数据展示和操作界面。