Disable a button after save in extjs4.2

Question

I am saving three tabs on a one save button, however on the click of the save button i'm trying to disable the button while saving the data in the three tabs to prevent the user from clicking several times on the save button, because i have a timeout in my function. Any help on how to do so?

Ext.onReady(function(){



    tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,
        tbar: [{
            xtype: 'button',
            deferredRender : false, 
            handler:function(){
            save("frm_A", save);
            },    


        }],
        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",        
                },{
                    id:"panel_B",
                    html: "<iframe src='"+B_url+"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",

                },{
                    id:"panel_C",
                    html: "<iframe src= '"+C_url+"' width='100%' height='100%' id='frm_C' name='frm_C' frameborder=0 />",
                }]

        });


    viewport = new Ext.Viewport({
        layout:'border',
        items:[tabPanel]
    });



    function save(record){

        var Aid = record.getField("NUMBER").getRealValue();
        var currentTab = tabPanel.getActiveTab();
              tabPanel.setActiveTab(1);
              tabPanel.setActiveTab(2);
              tabPanel.setActiveTab(0);
              tabPanel.setActiveTab(currentTab);

        var B= window.frames["frm_B"];
        var C= window.frames["frm_C"];

        setTimeout(function(){   
            try {
            B.RECORD.getField("ID").setRealValue(Aid);
            C.RECORD.getField("ID").setRealValue(Aid);
            B.RECORD.update();
            C.RECORD.update();

            parent.refreshGrid();
            parent.win.close();
        }
        catch(e){
            showError(e);
        }
        }, 4000);

    }


});

Answer 1

One way in your save handler is to call the button's setDisabled() method.

Example:

handler: function() {
   this.setDisabled(true);
   save("frm_A", save);
}

Then, inside your setTimeout you can setDisabled(false).

To be able to do that effectively you may want to consider refactoring your save handler a little bit, for example, by passing "this" as a parameter to your save function so that you can call setDisabled(false) on that parameter.

https://docs.sencha.com/extjs/4.2.5/#!/api/Ext.button.Button-method-setDisabled

Hope that helps.