Ext2.0框架Grid深度解析：数据绑定与排序功能

"这篇内容主要介绍了Ext2.0框架中的Grid控件的使用，强调了其强大功能和灵活性，能够处理各种数据类型，并通过Ext.data.Store进行数据转换。" 在Ext2.0框架中，Grid控件是一个核心组件，用于展示和操作结构化的数据。这个框架以其强大的功能和丰富的用户界面组件，给开发者留下了深刻印象。Grid控件不仅能够呈现美观的表格，还支持多种数据源，包括二维数组、JSON和XML数据。 首先，创建Grid的关键在于定义ColumnModel，它用于设置表格的列头和数据绑定。例如： ```javascript var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); cm.defaultSortable = true; ``` 这段代码创建了一个包含四列的ColumnModel，其中`dataIndex`属性将列头与数据源中的字段关联起来。`defaultSortable`属性默认开启，意味着所有列都可以进行排序。 接下来，数据需要通过Ext.data.Store来处理和转换。Store作为数据模型，可以连接到各种数据源并适配不同的数据格式。例如，处理二维数组数据： ```javascript var data = [ ['1', 'male', 'name1', 'descn1'], ['2', 'male', 'name2', 'descn2'], // ... ]; var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id', mapping: 0}, {name: 'sex', mapping: 1}, {name: 'name', mapping: 2}, {name: 'descn', mapping: 3} ]) }); ``` 这里，`ArrayReader`被用来读取二维数组数据，`mapping`属性指示了每个字段在数组中的位置。 对于JSON数据，Reader可以是`JsonReader`，它会解析JSON对象并提取所需字段。对于XML数据，可以使用`XmlReader`，通过XPath表达式获取数据。在这些Reader中，都需要指定数据源中的字段与Grid列的映射关系。 最后，创建Grid实例并关联Store和ColumnModel： ```javascript var grid = new Ext.grid.GridPanel({ store: ds, cm: cm, // 其他配置项... }); grid.render('gridDiv'); // 渲染到指定的DOM元素 ``` Ext2.0的Grid控件结合ColumnModel和Ext.data.Store，使得开发人员能够灵活地处理不同数据格式，提供了一种强大且易于使用的数据展示解决方案。通过调整ColumnModel和Store的配置，可以实现各种自定义功能，如排序、过滤、分页等，进一步提升用户体验。