ExtJS表单(Form)组件配置与操作详解

需积分: 12 0 下载量 75 浏览量 更新于2024-09-13 收藏 80KB PDF 举报
"本文详细介绍了ExtJS中的form组件配置参数,包括Ext.form.Action和Ext.form.BasicForm的相关选项和方法。" 在ExtJS框架中,form组件是用于构建交互式表单的核心组件,它允许用户输入数据并能进行数据验证和提交。下面我们将深入探讨其配置参数和相关类的功能。 首先,我们来看`Ext.form.Action`类,这是处理表单动作的基础。`Ext.form.Action`定义了几个关键的配置项和属性: 1. **success**:当表单动作执行成功后调用的回调函数,传入参数为`form`和`action`对象。 2. **failure**:执行失败后的回调函数,同样接收`form`和`action`作为参数。 3. **method**:设置表单提交的方式,支持`GET`和`POST`两种方式。 4. **params**:提交到服务器的额外参数。 5. **url**:表单动作的URL目标。 6. **waitMsg**:执行操作时显示的等待提示信息。 7. **Action.CLIENT_INVALID**:表示客户端验证失败。 8. **Action.CONNECT_FAILURE**:通信错误。 9. **Action.LOAD_FAILURE**:加载数据时出现问题,如返回数据缺少`data`属性。 10. **Action.SERVER_INVALID**:服务端验证失败。 11. **failureType**:错误类型标识。 12. **result**:包含了`success`属性(布尔值)和其他可能的响应属性,如`msg`。 13. **type**:动作类型,可选值有`submit`和`load`,分别对应表单提交和数据加载。 接着,我们转向`Ext.form.BasicForm`,这是`Ext.form.FormPanel`的基础,它提供了对表单的高级控制: 1. **baseParams**:默认传递到服务器的参数。 2. **method**:与`Ext.form.Action`相同,设置表单提交方式。 3. **url**:表单的默认提交路径。 4. **fileUpload**:布尔值,指示表单是否包含文件上传。 5. **timeout**:表单动作的超时时间,默认30秒。 6. **trackResetOnLoad**:表单加载时是否自动重置数据。 `Ext.form.BasicForm`还提供了一些常用方法: 1. **doAction**:执行指定的动作,接受`actionName`和`options`参数。`options`可以包含`url`、`method`、`params`、`headers`、`success`回调、`failure`回调以及`clientValidation`标志(决定是否进行客户端验证)。 2. **clearInvalid**:清除表单中所有无效的验证信息。 3. **findField**:根据字段名查找表单内的Field组件。 通过这些配置项和方法,开发者可以灵活地控制表单的行为,例如验证用户输入、处理提交或加载数据、自定义错误处理等。理解并熟练运用这些配置和方法对于创建功能丰富的动态表单至关重要。