PDA

View Full Version : Toggle Button Group - all buttons can be unpressed



okwei
14 Sep 2012, 8:03 AM
I'd like to replicate a radio button group behavior - at least 1 button is selected, but it seems that all buttons in the toggle group can be unpressed.

any work around?

scottmartin
14 Sep 2012, 10:26 AM
See if this works for you:



Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
text: 'regular item 1',
group: 'mygroup',
checked: true
},{
text: 'regular item 2',
group: 'mygroup',
checked: false
},{
text: 'regular item 3',
group: 'mygroup',
checked: false
}]
});


Scott.

okwei
14 Sep 2012, 5:47 PM
Nope, this only render 3 buttons (with ext4.1.1), none of which can be selected/pressed. You can only click on them, just like regular buttons.


See if this works for you:



Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
text: 'regular item 1',
group: 'mygroup',
checked: true
},{
text: 'regular item 2',
group: 'mygroup',
checked: false
},{
text: 'regular item 3',
group: 'mygroup',
checked: false
}]
});


Scott.

vietits
14 Sep 2012, 6:58 PM
FYI: This solution does not check initial state of buttons yet.


Ext.onReady(function(){
Ext.define('GroupButton', {
extend: 'Ext.button.Button',
alias: 'widget.groupbutton',
toggleGroup: 'defaultGroup',
initComponent: function(){
var me = this;
me.callParent(arguments);
},
toggleHandler: function(button, state){
var me = this;
if(!(me.pressed || Ext.ButtonToggleManager.getPressed(me.toggleGroup))){
me.toggle(true, true);
}
}
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
tbar: {
items: [{
xtype: 'groupbutton',
text: 'Button 1',
pressed: true
},{
xtype: 'groupbutton',
text: 'Button 2'
},{
xtype: 'groupbutton',
text: 'Button 3'
}]
}
});
});

scottmartin
15 Sep 2012, 5:47 AM
Err, I misunderstood the requirement. Vietits should work fine.

Sorry for the misunderstanding.

Scott

RobertGary1
7 Nov 2012, 5:03 PM
I just tried Vietits' solution and it worked great. No need to recreate a button group though, I was able to do it directly....

var newButton = Ext.widget('button', {
...
toggleHandler : function(button, state){ //prevent all unpressed. Sencha workaround.
var me = this;
if(!(me.pressed || Ext.ButtonToggleManager.getPressed(me.toggleGroup))){
me.toggle(true, true);
}


}


});

Of course the best solution would be for the Button object to have a parameter that prohibits toggle groups from having all buttons toggled.

evant
7 Nov 2012, 5:12 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-cfg-allowDepress

RobertGary1
8 Nov 2012, 10:30 AM
Ah. You're right. I've updated my solution to use that config option now.