PDA

View Full Version : Make a CheckBox work like Radio (single selection)



Kangulo
7 Feb 2014, 1:41 PM
Hi, Everybody :D

I would like to that the checkbox group button you can configure like radio group, I mean, the checkbox allow multiselection but i want a group the checkboxes that allow a single selection when select one the others must be unselected, the question... it is that posible?? :-? Or There are a way to change how it looks the radio buttons to seem like checkboxes, maybe a render, i dont know???

Thanks in advance.

Regards.

palakurthivishal
7 Feb 2014, 7:22 PM
Hello Kangulo,
Please look at this snippet execution.

Ext.create('Ext.form.Panel', { bodyPadding: 10,
width: 300,
title: 'Pizza Order',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'Toppings',
itemId : 'test',
defaultType: 'checkboxfield',
listeners : {
customEvent : function(checkboxToExclude, me){
// listen to the custom event
var checkboxes = me.query('checkboxfield');
for(var i = 0; i<checkboxes.length;i++){
var checkbox = checkboxes[i];
if(checkbox != checkboxToExclude)
checkbox.setValue(0);
}

}
},
items: [
{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1',
listeners : {
change : function(cmp, newVal){
if(newVal){
// fire the custom event
var parent = Ext.ComponentQuery.query('#test')[0];
parent.fireEvent('customEvent',cmp, parent )
}
}
}
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2',
listeners : {
change : function(cmp, newVal){
if(newVal){
var parent = Ext.ComponentQuery.query('#test')[0];
parent.fireEvent('customEvent',cmp, parent )
}
}
}
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3',
id : 'checkbox3',
listeners : {
change : function(cmp, newVal){
if(newVal){
var parent = Ext.ComponentQuery.query('#test')[0];
parent.fireEvent('customEvent',cmp, parent )
}
}
}
}
]
}
],
bbar: [
{
text: 'Select Bacon',
handler: function() {
Ext.getCmp('checkbox3').setValue(true);
}
},
'-',
{
text: 'Select All',
handler: function() {
Ext.getCmp('checkbox1').setValue(true);
Ext.getCmp('checkbox2').setValue(true);
Ext.getCmp('checkbox3').setValue(true);
}
},
{
text: 'Deselect All',
handler: function() {
Ext.getCmp('checkbox1').setValue(false);
Ext.getCmp('checkbox2').setValue(false);
Ext.getCmp('checkbox3').setValue(false);
}
}
],
renderTo: Ext.getBody()
});

Kangulo
10 Feb 2014, 5:24 AM
Thank You! palakurthivishal for the code, although i thought that it was more easier like a property or a configuration.

All served me well anyway, it works!

Thank You Again! :)