PDA

View Full Version : How can I toggle buttons in a group?



Voodoo
18 Sep 2009, 1:43 AM
Here is some of my code:



var p = new Ext.Panel({
title: 'My title',
renderTo: 'tbar1',
margins: '0 0 0 0',
tbar:
[{
xtype: 'buttongroup',
columns: 4,
items: [{
xtype: 'tbbutton',
id: 'btnHome',
text: 'Home',
enableToggle: true
},{
xtype: 'tbbutton',
id: 'btnContact',
text: 'Contact',
enableToggle: true
},{
xtype: 'tbbutton',
text: 'Login',
enableToggle: true
},{
xtype: 'tbbutton',
text: 'Follow up',
enableToggle: true
}]
}]
});

where 'tbar1' is a <div>.

Example of what I want:
Every time I click "Home" button, I want this button to always show as "pressed". I also want all the other buttons to show as "not pressed".

I have used:



Ext.get('btnHome').on('click', function() {Ext.get('btnContact').toggle(false);
});
or



Ext.get('btnHome').on('click', function() {Ext.get('btnContact').toggle();
});

None of the above works as I want:
1. When I click "Home", the button changes between "pressed" and "not pressed", but i would like to stay "pressed" of course because I will navigate to a "home" page.
2. This is the strange thing. When I click "Home", the button "Contact" dissapears completely instead of changing appearence to "not pressed". If I click "Home" again, then "Contact" appears and so on.

Can you help me find the right solution? Maybe using "enableToggle" buttons is not what I need, but still, I was expecting that "Ext.get('btnContact').toggle()" would switch appearence and not visibility.

makana
18 Sep 2009, 3:01 AM
You already said the solution in your thread title ;)
Look the docs for toggleGroup
http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.Button&member=toggleGroup