1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    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
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      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
    Answers
    1
    Vote Rating
    2
    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
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      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
    Answers
    1
    Vote Rating
    2
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi