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

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

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