ExtJS 2.0 GridPanel：构建基础表格教程

JSON对象等）转换成GridPanel可以理解的格式。在本例中，我们使用了SimpleStore，它是最基础的数据存储类型，适用于简单的数据结构。SimpleStore的构造函数接收两个参数，一个是数据（data），一个是一组字段（fields），字段定义了数据的结构。 接下来，我们创建了一个GridPanel实例。GridPanel是ExtJS中展示表格的主要组件，它通过`renderTo`属性指定了渲染的目标位置（在本例中是"hello"这个ID的DOM元素）。`title`属性定义了表格的标题，`height`和`width`设置了表格的高度和宽度。`columns`属性定义了表格的列信息，每一项都是一个对象，包含了列的标题（header）和数据绑定的字段名（dataIndex）。`store`属性关联了之前创建的SimpleStore，这样数据就能被加载到表格中。`autoExpandColumn`属性设为2，意味着第二列（即"开发团队"列）会在初始化时自动展开以显示完整内容。 在代码的最后，我们看到表格的数据是一个二维数组，每一行代表一个记录，每列的数据通过字段名与GridPanel的列进行绑定。`dataIndex`属性就是用来指定这个对应关系的，例如"projectName"对应数据中的"name"字段。 在实际应用中，ExtJS的GridPanel通常会与服务器端进行数据交互，使用Ajax请求获取或更新数据。JsonStore在这种场景下特别有用，因为它可以直接解析JSON格式的响应数据。如果需要对数据进行分组，可以使用GroupingStore，它提供了对数据进行分组和折叠的功能。 此外，GridPanel还支持多种高级特性，如： 1. **排序**：用户可以通过点击列头来对数据进行升序或降序排序。 2. **分页**：通过搭配Pager组件，可以实现数据的分页显示。 3. **筛选**：允许用户根据列的值进行筛选，只显示符合条件的记录。 4. **编辑**：GridPanel可以集成CellEditing或RowEditing插件，实现单元格或整行的数据编辑。 5. **拖放**：通过DragDrop插件，可以实现表格行的拖放操作。 6. **行选择**：有单选和多选模式，可结合CheckBoxModel进行选择。 7. **列操作**：列可以被隐藏、显示、锁定或调整宽度。 以上就是关于ExtJS 2.0中GridPanel的基本使用和相关知识点的介绍。通过深入理解和灵活运用这些特性，开发者可以构建出功能丰富的数据展示和管理界面。