1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
    Answers
    1
    infernoz is on a distinguished road

      0  

    Default Answered: Enabling/Disabling buttons after store sync call

    Answered: Enabling/Disabling buttons after store sync call


    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
    Code:
    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
    Code:
    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!

  2. 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:
    Code:
    ...
    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
    }
    ...

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


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

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
    Answers
    1
    infernoz is on a distinguished road

      0  

    Default Passing buttons into store

    Passing buttons into store


    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

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    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:
    Code:
    ...
    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
    }
    ...

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
    Answers
    1
    infernoz is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread