ExtJS表格控件详解：从基础到实践

“Ext表格控件是ExtJS框架中用于展示数据的一种重要组件，适用于初学者学习使用。通过本文档，您可以了解到如何在ExtJS中创建和配置表格，包括设置属性、定义列模型、数据存储器的类型以及如何从远程获取数据。” 在ExtJS中，表格控件（Ext.grid.GridPanel）是一种强大的组件，它基于Ext.Panel并提供了丰富的功能来展示结构化的数据。表格的列信息由Ext.grid.ColumnModel定义，每个列都有特定的属性，如header（列头文本）和dataIndex（对应数据源中的字段名）。例如，创建一个包含“角色”、“等级”和“创建日期”的表格，可以这样定义列模型： ```javascript var cm = new Ext.grid.ColumnModel({ { header: '角色', dataIndex: 'role' }, { header: '等级', dataIndex: 'grade' }, { header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日') } }); ``` 数据存储器（Ext.data.Store）是表格数据的容器，它可以是JsonStore、SimpleStore或GroupingStore等不同类型的实例，根据数据源的格式选择合适的存储器。例如，创建一个内存数据存储器（MemoryProxy）并用ArrayReader解析数据： ```javascript var data = [ ['士兵', '7', '2011-07-24 12:34:56'], ['将军', '10', '2011-07-24 12:34:56'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ { name: 'role', mapping: 1 }, { name: 'grade', mapping: 0 }, { name: 'createDate', mapping: 2, type: 'date', dateFormat: 'Y-m-d H:i:s' } ]) }); store.load(); ``` 最后，将ColumnModel和Store装配到GridPanel中，完成表格的创建： ```javascript var grid = new Ext.grid.GridPanel({ renderTo: 'grid', store: store, cm: cm }); ``` 除了本地数据，表格还可以从远程服务器获取数据，例如使用ScriptTagProxy，它会通过<script>标签异步加载JSON数据。这种方式通常用于从服务器端API获取数据，代码如下所示： ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: 'http://example.com/your/data/source', success: function(response) { // 处理成功回调 }, failure: function() { // 处理失败回调 } }), reader: new Ext.data.JsonReader({ root: 'rows', // 数据的根节点 totalProperty: 'total' // 总记录数的属性名 }) }); store.load(); ``` 以上就是关于ExtJS表格控件的基础知识，包括其创建、属性设置、数据获取和远程数据加载。理解这些概念对于开发基于ExtJS的应用至关重要，尤其是当需要处理大量结构化数据时。