使用Ext的Grid,Form,Dialog实现CRUD操作

"这篇教程主要讲解如何利用Ext的Grid、Form和Dialog组件来实现分页列表、创建新记录以及编辑已有记录的功能。" 在Web应用开发中，ExtJS是一个强大的JavaScript库，它提供了丰富的组件和功能，使得构建交互式用户界面变得简单。本教程将深入探讨如何使用ExtJS中的关键组件——Grid、Form和Dialog，来实现常见的数据管理操作，包括分页显示列表、创建新记录、更新现有记录和删除记录。 1. **分页列表**: - Ext的Grid组件是用于展示数据表格的核心组件，它可以轻松地处理大量数据并支持分页。通过配置store和paging toolbar，可以实现数据的分页加载和导航。例如，设置store的`autoLoad`属性为true，`pageSize`属性来指定每页显示的记录数，然后在toolbar中添加`paging`插件。 2. **创建新记录**: - 创建新记录通常通过Dialog组件实现，它是一个模态窗口，用于显示表单。在示例中，首先创建一个隐藏的div作为Dialog的基础结构，然后使用Ext.form.Form组件创建表单字段，如名称和描述字段。表单的提交URL应指向服务器端处理新建记录的接口。 ```javascript this.addForm = new Ext.form.Form({ labelAlign: 'right', url: '/wit/add.shtml' }); ``` 3. **编辑记录**: - 编辑操作与创建类似，但也需要加载现有的记录数据。当用户选择一行数据进行编辑时，首先获取选中行的数据，然后填充到Dialog的表单中。表单提交时，应使用PUT或POST请求更新服务器上的数据。 4. **删除记录**: - Grid通常提供一个删除按钮或者行级别的删除操作。当用户触发删除操作时，可以获取选中行的ID，发送DELETE请求到服务器删除对应的数据。 5. **Dialog的显示和关闭**: - 在需要显示Dialog时，可以使用`show`方法，而关闭Dialog则调用`hide`方法。对于创建和编辑操作，Dialog通常会在表单提交后关闭，并显示操作结果的提示。 6. **事件监听和处理**: - 需要监听Grid的事件，如row selection改变，以决定何时显示编辑Dialog。同样，表单的submit事件也需要监听，以处理提交过程中的错误或成功情况。 7. **表单验证**: - 在创建和编辑表单时，可以设置字段的`allowBlank`属性来实现非空验证。此外，还可以使用Ext.form.field.VTypes或其他自定义验证规则进行更复杂的验证。 总结来说，本教程涵盖了ExtJS中核心组件的使用，通过实例化Grid、Form和Dialog组件，实现了数据管理的基本功能。理解这些组件的工作原理和相互协作的方式，对于开发高效、用户友好的数据驱动Web应用至关重要。