ExtJS Grid 使用详解与示例

"这篇文章主要介绍了ExtJs中的Grid组件的使用方法，包括ColumnModel的配置、数据源的设置以及ArrayReader的使用。" 在ExtJs框架中，Grid组件是一种非常重要的展示数据的控件，它允许用户以表格的形式展示和操作数据。在Ext2.0版本中，Grid控件提供了丰富的功能，支持Json和XML等多种数据格式，通过灵活的数据绑定机制，可以轻松地将数据转换为Grid显示。 ColumnModel是Grid的核心部分，用于定义列的显示和行为。在示例代码中，我们创建了一个ColumnModel实例，包含了四列：id、sex、name和descn。每个列都由一个对象表示，包含`header`（列头）和`dataIndex`（对应数据源中的字段名）。`defaultSortable`属性默认设为true，意味着所有列都是可排序的。如果需要对特定列禁用排序，可以设置该列的`sortable`属性为false。 在ArrayData部分，我们定义了一个二维数组，存储了要显示的数据。这种数据结构简单明了，适用于小规模的数据展示。然后，我们创建了一个ArrayReader，它从数据源中读取信息。ArrayReader需要两个参数：一个是配置项，另一个是字段定义数组。字段定义数组中，每个元素包含`name`（对应ColumnModel中的`dataIndex`）和`mapping`（指定数据数组中的位置）。 ArrayReader与Ext.data.MemoryProxy结合使用，MemoryProxy作为数据源，可以直接处理内存中的数据。这样，我们就可以将数据加载到Store中，Store是ExtJs中管理数据的组件，负责数据的获取、更新和同步。在本例中，Store通过proxy加载数据，并通过reader解析数据，将数据映射到Grid的列上。 最后，调用ds.load()方法加载数据，Grid会根据ColumnModel和Store中的数据自动填充。在实际应用中，我们还可以添加其他功能，如行选择、分页、排序、过滤等，使Grid更加实用和功能丰富。 ExtJs Grid组件通过ColumnModel定义列属性，使用Store管理和加载数据，结合ArrayReader解析数据，实现数据到视图的映射。这使得开发人员能够方便地创建交互式的表格视图，以满足各种数据展示和操作的需求。