ExtJS 2.0 教程：深入解析Grid组件

本文档提供了一个关于Ext JS 2.0的教程，特别是关于Grid组件的详细讲解。教程中不仅涵盖了1.0和2.0版本的区别，还深入介绍了Grid的使用方法。示例代码展示了如何创建一个具有编辑功能的网格，包括列模型（ColumnModel）、数据存储（Store）、编辑网格面板（EditorGridPanel）以及分页工具栏（PagingToolbar）。此外，还包括了添加、删除、保存行的操作，并涉及到了与服务器端的交互。 在Ext JS 2.0中，Grid组件是用于展示和编辑大量数据的重要组件。这个教程中，首先定义了一个二维数组`data`，作为模拟的数据源。接着，定义了一个`renderSex`函数，根据值返回不同性别的HTML表示，用于自定义列的显示。 然后，创建了一个ColumnModel实例`cm`，它定义了Grid的列结构和编辑器。每个列对象包含header（标题）、dataIndex（对应数据字段）和editor（编辑器）属性。这里使用了`Ext.grid.GridEditor`将文本字段设为可编辑。 数据存储`ds`使用了`PagingMemoryProxy`，这是一个内存分页代理，它处理了数据的分页加载。`ArrayReader`用于解析数据源，指定每个字段的映射。同时，设置排序信息`sortInfo`以初始化排序。 接下来，创建了`EditorGridPanel`实例`grid`，指定了数据源`ds`和列模型`cm`。分页工具栏`bbar`提供了分页操作，而顶部工具栏`tbar`包含了添加、删除、保存行的功能。添加行时，会创建一个新的Record并插入到数据源，开始编辑。删除行时，通过确认对话框确认操作，然后从数据源移除选定的记录。保存时，获取所有修改过的记录，转换成JSON格式，通过Ajax请求发送到`save.php`进行保存，并在成功后重新加载数据源。 最后，定义了Record类，用于创建数据对象，以及加载初始数据和渲染Grid。 这个教程全面介绍了Ext JS 2.0 Grid组件的使用，包括数据模型、编辑、分页、交互逻辑等多个方面，对于学习和掌握Ext JS 2.0的Grid功能非常有帮助。