ExtJS 实战：创建用户信息表单

"extjs增删改查典型案例" 在EXTJS框架中，开发Web应用程序时，实现数据的增删改查（CRUD）是常见的需求。本文档提供的代码示例展示了如何利用EXTJS创建一个用于用户信息管理的表单，包括用户编码、用户名、密码和确认密码等字段，同时包含了验证和基本的UI布局。 1. **EXTJS FormPanel** - `FormPanel`是EXTJS中用于构建表单的主要组件，它可以包含多个表单字段和其他UI元素。 - 在`showUserForm()`函数中，创建了一个`FormPanel`实例，用于展示用户信息编辑的界面。 2. **FormPanel配置** - `id`：定义了表单的唯一标识符，用于后续的DOM操作或组件引用。 - `labelWidth`和`labelAlign`分别设置了标签的宽度和对齐方式。 - `border`和`bodyBorder`控制表单边框的显示。 - `frame`表示是否显示边框，这里是true，表示有边框。 - `items`属性包含了表单的具体字段。 3. **表单字段配置** - `xtype`：定义了字段类型，如`'textField'`代表文本输入框。 - `hiddenName`：为字段指定后台处理时的真实名称，与数据库字段对应。 - `fieldLabel`：设置字段的标签文本。 - `blankText`和`allowBlank`组合用于字段非空验证。 - `maxLength`和`minLength`限制输入的字符长度。 - `vtype`定义自定义验证类型，如`'specialChar'`可能是用于特定字符类型的验证。 4. **表单布局** - `layout:'column'`表示使用列布局，将表单字段分列展示。 - `columnWidth`设置每个列的宽度比例，如`.8`表示占总宽度的80%。 5. **验证规则** - `vtype`支持内置验证类型，如`'alnum'`, `'email'`等，也可以自定义，如`'pwdRange'`可能是用来确保两次输入的密码一致。 - `pwdRange`的配置项`{begin:'userInfo.pwd', end:'rPwd'}`表明了两个字段的值需相等，即确认密码和密码必须一致。 6. **服务器端交互** - 提供的JSP代码片段显示了如何在Java中处理EXTJS的请求，但没有具体实现，通常会包含数据库查询、更新等操作。 7. **按钮操作** - `buttons`数组定义了表单底部的操作按钮，如`addForm`、`submitForm`和`resetForm`，每个按钮都有对应的处理函数，用于执行添加、提交查询和重置表单的操作。 8. **布局与样式** - `region`属性将表单放置在容器的北（north）部，这是EXTJS布局的一部分。 - `anchor`属性用于调整控件的大小，如`'80%'`表示占据父容器的80%宽度。 总结起来，这个示例提供了一个EXTJS用户信息管理表单的完整实例，包括表单字段的定义、验证规则的设置以及按钮功能的绑定，适合于学习EXTJS的CRUD操作和UI设计。开发者可以通过这个例子进一步了解EXTJS如何处理用户输入、验证数据和与服务器进行交互。