PDA

View Full Version : Enabling/Disabling buttons after store sync call



infernoz
9 Apr 2012, 12:22 PM
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
9 Apr 2012, 4:50 PM
You should disable buttons on 'beforesync' event of the store and enable buttons on its 'write' event.

infernoz
10 Apr 2012, 4:47 AM
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
10 Apr 2012, 5:33 AM
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
18 Apr 2012, 10:48 AM
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