ExtJS表单操作指南：获取数据与组件值

"这篇文档主要介绍了ExtJS中的表单功能，包括如何获取表单数据、获取输入框的值，以及各种表单组件的使用。" 在ExtJS中，表单通常使用FormPanel作为容器，它提供了丰富的样式和功能。表单可以采用form布局或formtable布局，类似于HTML中的form标签，但提供了更多自定义选项和交互效果。创建一个FormPanel就意味着在页面上创建了一个可交互的表单区域。 表单中包含多种组件，这些组件与HTML表单元素相对应，如： 1. TextField：用于输入单行文本，相当于HTML的`<input type='text'/>`。 2. TextArea：用于输入多行文本，相当于`<textarea>`。 3. Checkbox：用于复选选择，相当于`<input type='checkbox'/>`。 4. CheckboxGroup：用于展示一组复选框，每个项可以在同一行显示。 5. Radio：用于单选选择，相当于`<input type='radio'/>`。 6. RadioGroup：用于展示一组单选框，每行可以显示多个单选框。 7. Hidden：用于隐藏输入值，相当于`<input type='hidden'/>`。 8. ComboBox：提供下拉列表选择，用户可以输入或选择已有选项。 9. CompositeField：组合多个组件在同一行显示。 10. DateField：用于选择日期，提供了日历控件。 11. Datetimefield：用于选择日期和时间。 12. DisplayField：只读显示字段，用于展示非编辑信息。 13. NumberField：用于输入数字，提供了数字验证。 14. FileUploadField：文件上传组件，需要额外的CSS和JS支持。 在表单组件的配置中，`fieldLabel`定义了组件的标签，`cls`用于设置样式类，`allowBlank`设定是否允许空白，`name`则对应HTML中的name属性，用于标识和获取数据。 获取表单数据可以通过`form.getForm().getValues(false)`或`form.form.getValues(false)`，其中`form`是表单的变量名。`getValues(false)`返回一个对象，包含所有表单字段的键值对；若参数为`true`，则返回一个URL编码的字符串，适合用于提交表单。例如，`p.xingm`表示获取名为'XINGM'的字段值。 获取单个输入框的值，可以使用`Ext.getCmp('XINGM').getValue()`，这里的`XINGM`是输入框的ID。`Ext.getDom('XINGM').value`等同于JavaScript的`document.getElementById('XINGM').value`，都是获取DOM元素的值。 表单组件的使用极大地丰富了用户界面的交互性，提供了更灵活的数据输入和验证机制。通过结合布局管理，开发者可以构建出符合业务需求的复杂表单。在实际开发中，还可以利用ExtJS的事件处理机制，实现如表单验证、数据提交等高级功能。