PDA

View Full Version : ExtJS 4.2.1: Maintain the pressed state of the button.



savvion-dev
30 Sep 2013, 6:58 AM
Hello,


We are using ExtJS 4.2.1.


Requirement:
We wanted to maintain the pressed state of the button. The button can also have menu.
1) If the button has NO menu, the pressed state of the button can be manintained directly.
2) If the button has menu, the pressed state of the button can be manintained only when the menu item of the button is clicked.

Test case code:
Ext.onReady(function () {
Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());
Ext.define('Bm.component.MenuItemButton', {
extend: 'Ext.button.Button',
alias: 'widget.menuitembutton',
stateEvents: ['press'],
enableToggle: true,
getState: function() {
return { pressed: this.pressed };
},
applyState: function(state) {
this.toggle(state.pressed);
},
initComponent: function(config) {
this.stateful = true;
this.stateId = this.id + "_state";
this.on('toggle', function(self, pressed, eOpts) {
this.fireEvent('press');
}
 );
this.callParent();
}
});
Ext.define('Bm.component.Menu', {
extend: 'Ext.menu.Menu',
alias: 'widget.bmmenu',
initComponent: function(config) {
this.callParent();
}
});
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
defaults: {
xtype: 'menuitembutton',
toggleGroup: 'menuitembuttongroup'
},
items: [
{
text: 'Button1',
id: 'btn1',
},
{
text: 'Button2',
id: 'btn2',
},
{
text: 'Button3',
id: 'btn3',
},
{
text: 'Button4',
id: 'btn4',
},
{
text: 'Button5',
id: 'btn5',
menu: {
xtype: 'bmmenu',
items: [
{
text: 'a',
handler: function() {
console.log('menuitem a clicked');
}
},
{
text: 'b',
handler: function() {
console.log('menuitem b clicked');
}
}
]
}
},
]
});


});


Test case:
There are five buttons (Button1, Button2, Button3, Button4, Button5) rendered as items of a toolbar.
Button5 has a menu in it.


With this test case, first point of requirement is working fine.
But the second point of requirement needs to be taken care.


Can anyone please suggest on this.


Thanks,
Amal

ettavolt
30 Sep 2013, 10:29 AM
'menu item of the button is clicked' is not a state, it is a deed.

savvion-dev
30 Sep 2013, 9:41 PM
Hello ettavolt (http://www.sencha.com/forum/member.php?316440-ettavolt),

Thanks for your reply.

I don't understand your comment. Can you please explain it little more.
And do you mean that we can not fullfil the requirements directly?

Thanks,
Amal

ettavolt
1 Oct 2013, 10:18 PM
Yes, your requirements are wrong (or you've written them as such). 'Clicked' describes something that user does and is not a valid state for menu item (or maybe is valid but only while click handler runs).