ExtJs 基础操作：增删改查代码示例

"这篇资源是关于ExtJS框架中常用的增删改查操作的代码示例，适合初学者参考。作者花慧在2009年12月22日整理了这段代码，目的是帮助理解如何在ExtJS中进行数据操作。" 在Web应用开发中，ExtJS是一个强大的JavaScript库，用于构建富客户端界面。它提供了丰富的组件和功能，包括表格、表单、窗口、菜单等，以及强大的数据绑定和Ajax交互能力。在ExtJS中进行增删改查（CRUD）操作是常见的需求，以下是对这段代码的详细解释： 1. **查询（Query）** `searchQueryForm` 函数创建了一个查询表单。表单包含在`Ext.FormPanel`中，它设置了ID为`queryForm`，并指定了渲染的目标元素为`searchPanel`。表单包含各种字段，如文本框、下拉框等，用于输入查询条件。`buttons`数组定义了表单上的按钮，如"新增"和"查询"，每个按钮都有对应的处理函数。 2. **新增（Add）** `addForm` 函数通常会打开一个新的窗口或弹出对话框，展示一个空白的表单让用户输入新记录的数据。这个函数的实现可能包括创建一个新的`Ext.Window`实例，加载一个空白的表单面板，并在用户完成输入后提交数据。 3. **提交（Submit）** `submitForm` 是用于执行查询的函数。它会收集表单中的数据，然后调用服务器端接口执行查询操作。这通常涉及到`Ext.Ajax.request`或`Ext.form.Basic.submit`来发送Ajax请求，传递查询参数，并处理返回的结果，如填充数据网格。 4. **修改（Update）** 在ExtJS中，修改通常涉及选中表格中的一条记录，然后在弹出的表单中显示记录详情，允许用户编辑。修改操作通常不在这段代码中直接体现，但可以基于查询和新增功能进行扩展，比如通过`Ext.grid.Panel`的行选择和`edit`事件来触发编辑表单。 5. **删除（Delete）** 删除操作通常涉及用户在表格中选择一条或多条记录，然后确认删除。这可能通过点击带有删除功能的按钮触发，调用服务器接口进行删除。在`Ext.grid.Panel`中，可以监听`rowselect`事件，然后提供一个删除按钮，点击时根据选中的行的ID发送删除请求。 6. **数据分页（Pagination）** 变量`QUERY_PAGE_SIZE`被设置为10，这意味着每页将显示10条记录。在实际应用中，当数据量大时，通常需要结合服务器端分页功能，通过`store`的`loadPage`方法加载特定页的数据。 7. **数据绑定（Data Binding）** ExtJS的数据绑定机制使得界面组件可以直接与后台数据源关联，当数据发生变化时，界面会自动更新。例如，数据网格(`Ext.grid.Panel`)可以与`Ext.data.Store`绑定，Store又与远程数据服务（如RESTful API）连接，实现双向数据同步。 8. **事件监听（Event Handling）** 在表单或组件上注册事件监听器是ExtJS中常用的设计模式。例如，按钮的`handler`属性定义了点击事件触发的函数，而表单的`submit`事件可以用来捕获表单提交时的事件。 总结来说，这段代码是ExtJS实现CRUD操作的基础示例，通过理解和学习这段代码，开发者可以更好地掌握如何在ExtJS环境中处理数据交互，为自己的应用程序提供强大的用户界面和交互体验。对于初学者而言，这是一份宝贵的参考资料。