PDA

View Full Version : RadioGroup not getting displayed



roshniblr
22 Aug 2011, 11:32 PM
Hi,

I just tried a simple RadioGroup which did not render in my page.
Here is the snippet:

var MyRadioGroupId_Component= new Ext.form.RadioGroup({
renderTo:'MyRadioGroupId',
listeners: {change:function(obj, newValue, oldValue) {
onChangeOfRadio(newValue);
}
},
items: [{boxLabel: 'I accept ', name: 'name1', inputValue: 'Yes', width:150},
{boxLabel: 'I do not accept t', name: 'name2', inputValue: 'No', width:150, checked: true}],
columns: 1,
checked: true,
id: 'myRadioGrp'
});

I also tried create instead of new but the component still does not render.:(

skirtle
23 Aug 2011, 12:39 AM
Please use code tags when you post code (# button on the editor toolbar). It makes it harder for us to help you if you don't.

Try putting a width and height on your radiogroup. Worked for me once I added them.

The way to debug an issue like this is to use Firebug or a similar tool to inspect the elements on the page. Using that I could see that the radiogroup was there it just had a very small size so I couldn't see it.

roshniblr
23 Aug 2011, 1:03 AM
Hi,
Thanks for the suggestion. I could see the radiogroup on the page.
There is one more issue that I'm facing. I can select both the radio buttons in the radiogroup.
I thought I should be able to select only one at a time not both at the same time.

skirtle
23 Aug 2011, 1:06 AM
The radio buttons need to have the same name for that.

roshniblr
23 Aug 2011, 9:11 PM
var MyRadioGroupId_Component= new Ext.form.RadioGroup({
renderTo:'MyRadioGroupId',
listeners: {change:function(obj, newValue, oldValue) {
onChangeOfRadio(newValue);
}
},
items: [{boxLabel: 'I accept ', name: 'radioGrp', inputValue: 'Yes', width:150},
{boxLabel: 'I do not accept t', name: 'radioGrp', inputValue: 'No', width:150, checked: true}],
columns: 1,
checked: true,
id: 'myRadioGrp'
});





I have same name still i can select both the radio buttons. I want if the first radio is selected then the second radio will not be selected i.e value is false and vice versa.

skirtle
23 Aug 2011, 9:21 PM
Try commenting out the call to onChangeOfRadio(). That's breaking it for me. I obviously don't know what that function does but if it causes an error to be thrown it'll stop the selection working correctly.

roshniblr
23 Aug 2011, 10:44 PM
Wow its working now after commenting that.::)

But I need that onChnage functionality. Is there any way to fetch the inputValue or manually setting the value for the radioGroup? In Extjs 3.x, I was using something like this which used to work fine but in 4 its not working:



var MyRadioGroupId_Component= new Ext.form.RadioGroup({
renderTo:'MyRadioGroupId',
listeners: {change:function(obj, newValue, oldValue) {
onChangeOfRadio(newValue);
}
},
items: [{boxLabel: 'I accept ', name: 'radioGrp', inputValue: 'Yes', width:150},
{boxLabel: 'I do not accept t', name: 'radioGrp', inputValue: 'No', width:150, checked: true}],
columns: 1,
checked: true,
id: 'myRadioGrp'
});
if ('${condition}' == 'Yes') {
Ext.getCmp("myRadioGrp").setValue('Yes');
} else {
Ext.getCmp("myRadioGrp").setValue('No');
}


the red part currently is not working which used to work fine in 3.x.

skirtle
23 Aug 2011, 11:11 PM
Please read the documentation:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup-method-setValue

It would be something like this:


Ext.getCmp("myRadioGrp").setValue({radioGrp: 'Yes'});