"这篇文档主要介绍了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的事件处理机制,实现如表单验证、数据提交等高级功能。