ExtJS FormPanel详解与常用组件介绍

"了解和使用ExtJS的表单技术" 在ExtJS中，表单是构建交互式用户界面的重要组成部分，通常用于数据输入和验证。表单的实现主要依赖于`FormPanel`容器，它提供了丰富的功能和灵活性。`FormPanel`不仅仅是HTML的`<form>`标签的简单封装，而是增加了许多ExtJS特有的样式和行为，使其更适合于复杂的Web应用程序。 **FormPanel概述** FormPanel是ExtJS中的一个容器组件，用于组织和管理表单元素。它支持多种布局方式，如`form`布局和`formtable`布局。`form`布局主要用于一行一列的展示，而`formtable`布局则按照表格形式排列表单元素。通过FormPanel，开发者可以方便地创建包含各种输入控件的表单，并且可以轻松地进行数据验证和提交。 **表单组件** ExtJS提供了一系列的表单组件，这些组件对应于HTML中的各种输入元素，但提供了更丰富的功能和交互性： 1. **TextField**：用于输入单行文本，与HTML的`<input type="text">`相当。 2. **TextArea**：用于输入多行文本，对应HTML的`<textarea>`标签。 3. **Checkbox**：单个复选框，与HTML的`<input type="checkbox">`相同。 4. **CheckboxGroup**：允许用户在一组复选框中选择多个选项。 5. **Radio**：单选按钮，相当于HTML的`<input type="radio">`。 6. **RadioGroup**：在一行内显示多个单选按钮，供用户选择其中之一。 7. **Hidden**：隐藏输入框，与HTML的`<input type="hidden">`一致，用于存储不可见的数据。 8. **ComboBox**：下拉列表框，用户可以选择列表中的一个值。 9. **CompositeField**：组合组件，可以将多个表单元素组合在一起显示。 10. **DateField**：日期选择框，用户可以选择日期。 11. **DateTimeField**：日期时间选择框，同时选择日期和时间。 12. **DisplayField**：只读的显示框，用于显示非编辑数据。 13. **NumberField**：数字输入框，限制用户输入数字，并可设置步进值。 14. **FileUploadField**：文件上传组件，允许用户选择本地文件进行上传，是ExtJS的扩展组件，需要额外的CSS和JS文件支持。 **表单字段的配置** 每个表单组件都有一系列可配置的属性，例如`fieldLabel`用于定义字段的标签，`cls`用于设置自定义样式，`allowBlank`用于设定是否允许为空（如果为`false`，则会进行非空验证），`name`属性用于指定字段的名称，类似于HTML的`name`属性，用于识别和处理表单数据。 例如： ```javascript items: [{ fieldLabel: "姓名<font color='red'>*</font>", cls: 'text', allowBlank: false, name: 'XINGM' // name属性相当于<input type='text' name='XINGM'/> }, { fieldLabel: "密码<font color='red'>*</font>", inputType: 'password', cls: 'text', allowBlank: false, name: 'PASSWD' }, { fieldLabel: '性别&nbsp;&nbsp;', cls: 'imgtext', xtype: 'combo', store: xb, displayField: 'sex', hideTrigger: true }] ``` 在这个例子中，我们创建了两个字段，一个用于姓名，另一个用于密码，都是必填项。第三个字段是一个下拉组合框，用于选择性别，它的数据源来自`xb`这个store，并且隐藏了触发下拉的图标。 **表单操作** 除了基本的展示和输入，ExtJS的表单还支持数据的验证、获取和提交。通过调用`getForm()`方法，我们可以获取到FormPanel的Form对象，然后可以调用其提供的`isValid()`检查表单数据的有效性，`getValues()`获取所有字段的值，以及`submit()`来提交表单数据到服务器。 ExtJS的表单系统提供了强大的功能，不仅能够创建美观且交互性强的表单，还能确保数据的完整性和安全性，是开发富客户端应用程序时不可或缺的一部分。