ExtJS表格控件使用教程：创建与配置ColumnModel

“制作简单表格步骤-表格控件讲解技术” 在IT领域，特别是Web开发中，ExtJS是一个广泛使用的JavaScript库，它提供了丰富的用户界面组件，包括强大的表格控件。本教程将聚焦于如何使用ExtJS来制作一个简单的表格，主要涉及Ext.grid.GridColumnModel和Ext.data.Store的概念。 首先，制作一个简单的表格，我们需要定义表格的列。这可以通过创建一个Ext.grid.ColumnModel对象来完成。例如： ```javascript var cm = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id' }, { header: '名称', dataIndex: 'name' }, { header: '描述', dataIndex: 'descn' } ]); cm.defaultSortable = true; ``` 在这个例子中，`ColumnModel`定义了表格的结构，包含了三列：编号、名称和描述。`header`字段表示列头显示的文字，而`dataIndex`字段对应的是数据源中的键，用于绑定数据。`defaultSortable`属性设置为`true`意味着所有列默认都是可排序的。 接着，我们需要定义表格的数据存储器，通常使用Ext.data.Store。这个存储器可以是JsonStore、SimpleStore或GroupingStore，取决于数据的来源和处理方式。例如，如果你的数据来源于JSON格式的API响应，你可以使用JsonStore： ```javascript var store = new Ext.data.JsonStore({ url: 'your_data_source_url', root: 'your_data_root_node', fields: ['id', 'name', 'descn'] }); ``` 在这里，`url`字段指定了获取数据的API地址，`root`字段是JSON响应中包含数据的节点名，`fields`字段与`ColumnModel`中的`dataIndex`相对应，定义了数据模型的字段。 最后，将`ColumnModel`和`Store`结合到一个Ext.grid.GridPanel中，创建出实际的表格视图： ```javascript var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: 'grid-div' // 指定渲染到哪个DOM元素 }); ``` `GridPanel`是ExtJS中的核心表格组件，它继承自`Ext.Panel`，并包含了表格的显示和交互功能。`renderTo`属性用于指定表格在页面上的位置。 总结起来，制作一个简单的ExtJS表格，你需要以下步骤： 1. 定义列模型（ColumnModel），包括列头和数据键。 2. 创建数据存储器（如JsonStore），指定数据源和数据结构。 3. 创建GridPanel，将列模型和数据存储器关联，并指定渲染的位置。 通过这些基本操作，你可以构建出具有排序、分页等功能的动态表格，满足各种Web应用的数据展示需求。