PDA

View Full Version : CheckBoxGroup / RadioGroup



ValterBorges
16 Jul 2009, 11:05 AM
1. Is there a way to tell the CheckBoxGroup or RadioGroup to only allow one checkbox or radio button to be on and to automatically switch off the others when one is checked?

2. Is there a way to use the CheckBoxGroup/RadioGroup objects without having them render for you so when you need more complicated form layouts which you want to control such as checkbox's with text fields in between?

ValterBorges
16 Jul 2009, 11:42 AM
All set for #2 after digging into some more the name property will cause the browser to recognize the radio group.

Still wondering if this possible with CheckBoxes I tried the name property the same but it doesn't work for checkboxes.


var rYes = new Ext.form.Radio(
{
id:'rYes',
name: 'Question1',
renderTo: "drYes",
boxLabel:"Yes",
checked:false,
disabled:false
}
);

var rNo = new Ext.form.Radio(
{
id:'rNo',
name: 'Question1',
renderTo: "drNo",
boxLabel:"No",
checked:false,
disabled:false
}
);

pmatsumura
16 Jul 2009, 1:55 PM
You could loop over your items array of your CheckboxGroup and then disable all checkboxes except for the one checked.

Patrick

ValterBorges
16 Jul 2009, 2:05 PM
Thanks Patrick,

I was afraid that was the answer. Hoping to not have to do that.

mjlecomte
16 Jul 2009, 6:17 PM
Isn't it standard practice for checkbox to allow multiple selections and radios to allow one?

If you insist on going single checkbox approach you might search for Condor's thread that uses image sprites and then you could just change the image to a radio, checkbox, a firetruck or whatever you want.

ValterBorges
17 Jul 2009, 2:40 PM
Yes, there are lots of standards, but i'm designing some forms which were poorly designed to begin with but because the business doesn't want to change the look of the forms i'm having to jump thru hoops to get check boxes that act like radio buttons, and radio button groups to render properly inside of editable grids.


If I was to start fresh and had no pre-conditions i would do this differently.

Lukman
17 Jul 2009, 6:37 PM
... new Ext.form.CheckboxGroup({
...
listeners: {
change: function(me, checkeds) {
var count = (Ext.isArray(checkeds)? checkeds.length : 1);
var fn = (count >= 1?
function(item) { item.setDisabled(!item.getValue()); } :
function(item) { item.enable(); }
);
me.items.each(fn);
}
}
...
});