CODEWITHSUNDEEP
javascriptextjscallback
Edward Tanguay
Edward Tanguay

Reputation: 193312

How to make sure a function is not executed until Ext.FormPanel has successfully submitted its data?

I have an Ext.FormPanel which has a Save button which is supposed to do two things in this order: (1) post the data, (2) go back to the page from where it was called.

buttons: [{
        text: 'Save',
        handler: function() {
            if(panel_form.getForm().isValid()){
                panel_form.getForm().getEl().dom.action = 'backend/page/blocks/edit_positioned_post/17.html';
                panel_form.getForm().getEl().dom.method = 'POST';
                panel_form.getForm().submit(); //FIRST POST DATA
                replace_region_with_uri_content('/backend/page'); //THEN GO BACK
            } else {
                Ext.Msg.minWidth = 360;
                Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
            }
        }
    },{
        text: 'Cancel',
        handler: function(){
            replace_region_with_uri_content('/backend/page');
        }
    }]

However what actually happens is backwards, as I can see in Firebug, i.e. it (1) goes back, and (2) posts the data, which leads to the situation that the grid that it returns to does not show the updated data.

alt text

How can I force it to execute replace_region_with_uri_content() only after panel_form.getForm().submit() is completed, i.e. by sending the first function as a callback of the second?

Upvotes: 0

Views: 537

Answers (2)

Edward Tanguay
Edward Tanguay

Reputation: 193312

I found it, you can add a "success function" into the parameter array of submit() like this:

    buttons: [{
            text: 'Save',
            handler: function() {
                if(panel_form.getForm().isValid()){
                    panel_form.getForm().getEl().dom.action = 'backend/page/blocks/edit_positioned_post/17.html';
                    panel_form.getForm().getEl().dom.method = 'POST';
                    panel_form.getForm().submit({
                        success : function(form, action) {
                            replace_region_with_uri_content('/backend/page');
                        }
                    })
                } else {
                    Ext.Msg.minWidth = 360;
                    Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
                }
            }
        },{
            text: 'Cancel',
            handler: function(){
                replace_region_with_uri_content('/backend/page');
            }
        }]
});

Upvotes: 0

Lloyd
Lloyd

Reputation: 29668

You should add an event to the form, check out the actioncomplete event for BasicForm -

http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.BasicForm

You should only redirect here as once this event executes your form should have submitted.

Upvotes: 1

Related Questions