`
zhuchengzzcc
  • 浏览: 441824 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于Ext formPanel.getForm().submit()方法与standardSubmit属性的一些事

    博客分类:
  • ext
阅读更多

版本 Extjs 3.3.1   

查看API文档,发现formPanel.getForm()是一个BasicForm对象,submit方法定义如下:

 

submit Object options  ) : BasicForm

  • options : Object

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中添加相应的处理方法。

 

0
0
分享到:
评论

相关推荐

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (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....

    ExtJs 动态添加表单

    formPanel.getForm().on('submit', function(form, action) { console.log('表单提交', action.result); }); ``` 5. **动态移除字段**: 当需要移除某个字段时,可以使用`remove`方法: ```javascript ...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    此外,还可以使用`Ext.lib.Ajax.request`进行异步提交,方法与上述submit类似,只是更底层,可以直接控制请求参数和回调函数。 总之,Ext Form是Ext JS中的强大组件,提供了丰富的功能来创建、验证和提交表单数据。...

    Extjs2.x 实现文件上传组件

    formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件上传的脚本 method: 'POST', success: function(form, action) { Ext.Msg.alert('成功', '文件已成功上传'); }, failure: function...

    extjs属性方法大全

    ### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...

    Ext 添加功能form表单实例

    在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...

    EXT异步提交FORM表单

    form.getForm().submit({ success: function(form, action) { console.log('表单提交成功:', action.result); }, failure: function(form, action) { console.error('表单提交失败:', action.result); } });...

    Ext Form 示例

    formPanel.getForm().reset(); // 重置表单 } }] ``` 5. **监听表单事件**:可以监听表单的提交事件,以便在用户点击“提交”按钮时执行相应的操作。 ```javascript listeners: { submit: function(form, ...

    Ext与后台数据库交互

    - **submit方法**:`FormPanel.getForm().submit()`方法用于提交当前表单。该方法支持传递一些参数,如`success`和`failure`回调函数,用于处理提交成功或失败的情况。 提交成功时,服务器端返回的数据必须包含一...

    ext多文件上传

    formPanel.getForm().submit({ url: 'upload.php', // 服务器端处理文件的URL method: 'POST', enctype: 'multipart/form-data', params: {action: 'upload'}, // 添加额外参数 success: function(form, action...

    EXT提交服务器的三种方式

    表单的`action`属性会被设置为指定的URL,然后调用`submit()`方法触发提交。 3. **EXT的Ajax请求**:EXT提供了`Ext.Ajax.request`方法,这是一个独立于表单的AJAX请求方式,适用于不涉及表单的情况。这个方法可以...

    ext实现文件上传 后台java实现

    var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'uploadAction', // 后台处理文件的URL method: 'POST', waitMsg: '正在上传...', success: function(form, action) { ...

    extjs文档的详细介绍

    本文将详细介绍EXTJS中两种主要的前后台数据传递方法:`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。 首先,`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象,用于发送异步HTTP请求。它的基本...

    ext几个实例

    【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...

    Extjs upload(ext官网例子)

    var form = this.getForm(); if (form.isValid()) { form.submit({ url: 'your/upload/url', method: 'POST', success: function(form, action) { // 处理成功响应 }, failure: function(form, action) { //...

    extjs4如何给同一个formpanel不同的url_.docx

    var form = panel.getForm(); ``` 然后,我们可以在适当的时候为BasicForm设置不同的URL,比如在组件添加到不同容器或触发特定事件时: ```javascript form.url = '../logselectservlet'; // 设置新的URL ``` ...

    extjs中的formPanel以及表单的应用

    这通常通过设置`standardSubmit`为`false`,并提供`url`和`method`(GET或POST)来实现。 在实际应用中,我们可能需要处理表单的提交事件。这可以通过监听`action`事件完成,例如: ```javascript listeners: { ...

Global site tag (gtag.js) - Google Analytics