版本 Extjs 3.3.1
查看API文档,发现formPanel.getForm()是一个BasicForm对象,submit方法定义如下:
submit
( Object options
)
:
BasicForm
The options to pass to the action (see doAction
for details).
Note: this is ignored when using the standardSubmit
option.
The following code:
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
newStatus: 'delivered'
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
would process the following server response for a successful submission:
{
"success":true, // note this is Boolean, not string
"msg":"Consignment updated"
}
and the following server response for a failed submission:
{
"success":false, // note this is Boolean, not string
"msg":"You do not have permission to perform this operation"
}
上面API中可以非常明确的看到,这样的submit方法是其实一种异步提交,会返回json字符串,而是否返回成功或失败的根本因素在于json "success"值是否是 true(而且是Boolean类型,非字符串)。这与Ext.ajax.request方法的返回依据是不同的。
另外还有很重要的一点,就是上述红色字体所标注的地方
Note: this is ignored when using the standardSubmit
option.
也就是说,我们定义的formPanel中没有standardSubmit
属性时,就是上述过程。但如果
standardSubmit 为true
,就是同步提交了,也就会忽略
options
参数,在里面定义的url、params都会失效。这个时候需要是用另外的方法,先看下API中关于
standardSubmit属性的定义:
standardSubmit
: Boolean
If set to true
, standard HTML form submits are used instead
of XHR (Ajax) style form submissions. Defaults to false
.
Note:
When using standardSubmit
, the
options
to submit
are ignored because
Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g.
baseParams
and params
), utilize hidden fields
to submit extra data, for example:
new Ext.FormPanel({
standardSubmit: true,
baseParams: {
foo: 'bar'
},
url: 'myProcess.php',
items: [{
xtype: 'textfield',
name: 'userName'
}],
buttons: [{
text: 'Save',
handler: function(){
var fp = this.ownerCt.ownerCt,
form = fp.getForm();
if (form.isValid()) {
// check if there are baseParams and if
// hiddent items have been added already
if (fp.baseParams && !fp.paramsAdded) {
// add hidden items for all baseParams
for (i in fp.baseParams) {
fp.add({
xtype: 'hidden',
name: i,
value: fp.baseParams[i]
});
}
fp.doLayout();
// set a custom flag to prevent re-adding
fp.paramsAdded = true;
}
form.submit();
}
}
}]
});
这个时候需要在formPanel本身添加参数baseParams,并在handler中添加相应的处理方法。
分享到:
相关推荐
在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
formPanel.getForm().on('submit', function(form, action) { console.log('表单提交', action.result); }); ``` 5. **动态移除字段**: 当需要移除某个字段时,可以使用`remove`方法: ```javascript ...
此外,还可以使用`Ext.lib.Ajax.request`进行异步提交,方法与上述submit类似,只是更底层,可以直接控制请求参数和回调函数。 总之,Ext Form是Ext JS中的强大组件,提供了丰富的功能来创建、验证和提交表单数据。...
formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件上传的脚本 method: 'POST', success: function(form, action) { Ext.Msg.alert('成功', '文件已成功上传'); }, failure: function...
### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...
form.getForm().submit({ success: function(form, action) { console.log('表单提交成功:', action.result); }, failure: function(form, action) { console.error('表单提交失败:', action.result); } });...
formPanel.getForm().reset(); // 重置表单 } }] ``` 5. **监听表单事件**:可以监听表单的提交事件,以便在用户点击“提交”按钮时执行相应的操作。 ```javascript listeners: { submit: function(form, ...
- **submit方法**:`FormPanel.getForm().submit()`方法用于提交当前表单。该方法支持传递一些参数,如`success`和`failure`回调函数,用于处理提交成功或失败的情况。 提交成功时,服务器端返回的数据必须包含一...
formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件的URL method: 'POST', enctype: 'multipart/form-data', params: {action: 'upload'}, // 添加额外参数 success: function(form, action...
表单的`action`属性会被设置为指定的URL,然后调用`submit()`方法触发提交。 3. **EXT的Ajax请求**:EXT提供了`Ext.Ajax.request`方法,这是一个独立于表单的AJAX请求方式,适用于不涉及表单的情况。这个方法可以...
var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'uploadAction', // 后台处理文件的URL method: 'POST', waitMsg: '正在上传...', success: function(form, action) { ...
本文将详细介绍EXTJS中两种主要的前后台数据传递方法:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。 首先,`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象,用于发送异步HTTP请求。它的基本...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...
var form = this.getForm(); if (form.isValid()) { form.submit({ url: 'your/upload/url', method: 'POST', success: function(form, action) { // 处理成功响应 }, failure: function(form, action) { //...
var form = panel.getForm(); ``` 然后,我们可以在适当的时候为BasicForm设置不同的URL,比如在组件添加到不同容器或触发特定事件时: ```javascript form.url = '../logselectservlet'; // 设置新的URL ``` ...
这通常通过设置`standardSubmit`为`false`,并提供`url`和`method`(GET或POST)来实现。 在实际应用中,我们可能需要处理表单的提交事件。这可以通过监听`action`事件完成,例如: ```javascript listeners: { ...