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和插件，可以满足各种复杂的业务需求。通过深入理解并灵活运用这些特性，开发者可以创建出功能强大、用户体验良好的数据展示和操作界面。
我的内容管理
展开
