Ext GridPanel实例：数据展示与弹窗操作

在本篇Ext面向对象开发实践代码的示例中，主要关注如何利用Ext JS库中的核心组件构建一个功能丰富的数据展示和编辑界面。程序的核心是创建一个名为`PersonListGridPanel`的GridPanel，它负责显示和操作人员信息的数据列表。 首先，`PersonListGridPanel`继承自`Ext.grid.GridPanel`，这是一个用于展示表格数据的基本组件。通过`extend`方法，我们扩展了GridPanel的功能并定义了两个自定义窗口：`insertWin`用于添加新数据，`updateWin`用于更新已有数据。这两个窗口分别关联了`onInsertWinSubmit`和`onUpdateWinSubmit`事件处理器，确保在提交操作时触发相应的回调函数。 GridPanel的构造函数中设置了关键配置，包括： 1. `renderTo: Ext.getBody()` - 将GridPanel渲染到文档的body元素上。 2. `width` 和 `height` - 设置GridPanel的大小为360x300像素，且带边框（frame）。 3. `RowSelectionModel` - 定义了单选行选择模式，用户只能选择一行，选中后会触发自定义的"rowSelect"事件。 4. `store: new Ext.data.JsonStore` - 创建了一个JsonStore，存储人员信息数据，包括姓名、性别和年龄字段。 5. `draggable` 和 `enableColumnMove` 设置为`false`，防止用户拖动列或整个表格。 6. `title` 属性未明确给出，但通常用于设置表格的标题。 在后续代码中，可能还会处理GridPanel的列布局、按钮配置以及与弹出窗口的交互逻辑，例如在工具条上添加按钮，点击后调用对应窗口，用户输入数据后执行数据的增删改操作。这部分代码展示了如何结合Ext的组件体系进行面向对象的开发，实现了数据驱动的用户界面，提高了代码的复用性和可维护性。继续阅读后续部分，开发者可以学习到如何处理数据的增删操作、窗口的显示与隐藏，以及与前端框架更深入的集成技巧。