Enabling/Disabling buttons after store sync call

[infernoz]

Hello,

I am using ExtJS 4.0.7 and have set up a grid panel and numerous buttons inside other parent panels. What I would like to occur is when the "Submit" button is pressed, I would like the "Submit" button, and the remaining buttons to be disabled. Once a sync completes on a particular store, I would like the buttons to become active again.

I tried the following code, but the sync function returns prior to the response from the server returning. I want to only allow users to press buttons again once we get a response from the server.

//Inside my GridPanel - pretend that there would be more than one button in the items array that can be disabled

items: [
                    { xtype: 'component', flex: 1 },
                    { xtype: 'button', text: 'Submit', width: 80, listeners: {
                        'click': function() {
                            this.disable(true);
                            var orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
                            orgStatisticsStore.sync();
                            alert("woohoo");
                            this.enable(true); //being executed too quickly
                        }}}
                ]

//My Store

Ext.define('DMT.store.OrgStatisticsStore', {
    extend: 'Ext.data.Store',
    model: 'DMT.model.OrgStatisticsModel',
    alias : 'widget.OrgStatisticsStore',
    storeId: 'orgStatisticsStore',

    proxy: {
        type: 'ajax',
        url: '/DMT/index.html',
        reader: {
            type: 'json',
            root: 'data'
        },
        writer: {
            type: 'json',
            root: 'data',
            encode: true,
            writeAllFields: true
        },
        extraParams: {'processorType': 'orgStatistics'}
    }
......
.......

I'm assuming I should have to implement or call something like beforeSync and/or afterSync for this to work, but not sure of the precise function, where that should be defined, and how to pass the buttons I want disabled/enabled into that function.

Your help is greatly appreciated!

[vietits]

You should disable buttons on 'beforesync' event of the store and enable buttons on its 'write' event.

[infernoz]

Thanks vietits but how do I pass a reference to my buttons into the store, as the store is defined in a separate js file than my buttons? I'd like to keep the files separate as well to avoid having one file thats thousands of lines long

[vietits]

You can register to handle beforesync and write events of store where buttons are defined. I don't have your code so here is just my suggestion:

...
initComponent: function(){
    var me = this;
    var orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
    Ext.apply(me, {
        items: [
            { xtype: 'component', flex: 1 },
            { xtype: 'button', text: 'Submit', width: 80, listeners: {
                'click': function() {
                    orgStatisticsStore.sync();
                }
            }}
        ]        
    });
    orgStatisticsStore.on({
        scope: me,
        beforesync: me.disableButtons,
        write: me.enableButtons
    });
    me.callParent(arguments);
},
disableButtons: function(){
   // code to disable buttons
},
enableButtons: function(){
    // code to enable buttons
}
...

[infernoz]

Thanks vietits, I wish there was a way of getting references for buttons, views, etc, the same way you can get stores via Ext.data.StoreManager.lookup, but this solution works.

My next step is abstracting this code to a common parent view as I will have about 20 panels minimum and they will all have similar buttons and functions, just different data being shown. You may see another post regarding this .

infernoz