ExtJS 3.4表格控件教程：列模型与数据存储

"此资源提供了一个关于ExtJS框架中表格控件使用的基础示例，特别针对初学者，使用的是ExtJS 3.4版本。示例涵盖了如何创建表格列模型、数据数组、数据存储器以及GridPanel的配置。" 在ExtJS中，表格控件是开发Web应用程序时常用的一种组件，它提供了丰富的功能和高度的可定制性。这个例子展示了如何在实际项目中运用表格控件，包括以下几个核心知识点： 1. **Ext.grid.GridPanel**: 表格控件由`Ext.grid.GridPanel`类定义，它是`Ext.Panel`的子类，用于展示数据。在`xtype`中，我们通常用`grid`来引用这个组件。 2. **Ext.grid.ColumnModel**: 表格的列信息是由`Ext.grid.ColumnModel`对象管理的。每个列的配置包括`header`（列头文本）和`dataIndex`（与数据存储器中字段对应的键），此外还可以包含其他如`type`和`renderer`等属性，用于自定义列的显示和格式化。 3. **数据存储器（Store）**: 在示例中，数据存储器由`Ext.data.Store`定义。`JsonStore`, `SimpleStore`, `GroupingStore`等是其不同类型的实现，用于不同形式的数据源。在这个例子中，数据存储在内存中，因此使用了`MemoryProxy`，而数据解析则通过`ArrayReader`完成。 - **ArrayReader**: 这个读取器用于解析数组数据，`mapping`属性用于指定数据在数组中的位置，以便与列模型中的`dataIndex`对应。 4. **数据加载与渲染**: 示例中展示了如何创建数据数组，然后将其加载到数据存储器中。`store.load()`方法用于加载数据。 5. **远程数据获取**: 虽然例子中没有展示，但提到了`ScriptTagProxy`，这是一个用于从服务器获取数据的代理，它通过插入JavaScript脚本标签来异步加载JSON数据，常用于与服务器进行JSONP通信。 6. **GridPanel配置**: 最后，创建`GridPanel`并指定其`store`（数据存储器）和`cm`（列模型），将它们装配到表格中。 这个例子为初学者提供了一个清晰的ExtJS 3.4版本表格控件的实践指南，涵盖从数据模型定义到界面渲染的整个流程，是学习ExtJS表格功能的良好起点。