PDA

View Full Version : Trying to enable/disable button when I click on a certain button in toolbar



cpb09e
28 Aug 2013, 6:23 AM
I have a PagingToolbar and I have 4 buttons listed. When I click on a certain button, I want all the other buttons to be disabled. I want to set different conditions for when any of the buttons are clicked.

Here is the code of the PagingToolbar that I am working with:


tbar: new Ext.PagingToolbar({ beforePageText: 'Switch',
items: [{
xtype: 'tbspacer',
width: 20
},{
text: 'Add',
cls: 'x-btn-text-icon',
icon: 'public/images/add.gif'
},{
xtype: 'tbspacer',
width: 20
},{
text: 'Copy',
cls: 'x-btn-text-icon',
icon: 'public/images/add.gif'
},{
xtype: 'tbspacer',
width: 20
},{
text: 'Update',
cls: 'x-btn-text-icon',
icon: 'public/images/edit.gif'
}],
listeners: {
'beforerender': function(){
this.refresh.hide();
}
}
})

Is there an easy way to do this?

JIMECKELS
28 Aug 2013, 6:50 AM
I created my own button component, which has a component array (empty by default).

This list of components are enabled/disabled based on the state of the button in question.

ie



Ext.define('MyApp.components.Button', {
extend: 'Ext.button.Button',
associatedComponents: [],
initComponent: function () {
this.on('click', me.checkAssociatedComponents, me);
// or listen to toggle, or whatever makes sense for you
this.callParent(arguments);
},

checkAssociatedComponents: function () {
// find those components however you want, via name, itemId, type.. whatever, and enable/disable them how you want
}

});