PDA

View Full Version : Error ApplyTo on Existing Radio Button



ValterBorges
11 Aug 2009, 8:06 AM
I have a set of radio buttons that need to be inside of a span due to wrapping, if I use the renderTo and use a div it works but the div creates a new line and the yes / no radio buttons are no longer next to the text. If I use the applyTo I get an error on line 55778.



Ext.getCmp(el.dom.id).setValue(false);


error: 'Ext.getCmp(...)' is null or not an object


The layout looks similar to this including the width and wrapping, the question is fictional and was changed to protect the innocent so it may not make sense.:

1. Was the car purchased or driven during the month of August or during the time the driver
had a lease on the vehicle? [] Yes [] No

The markup


<span id='lSection1Q1' style="font-size:12px;padding:2px 2px 2px 2px;font-weight:bold;float:left;">Was the car purchased or driven during the month of August or during the time the driver had a lease on the vehicle?
<input id='iSection1A1-1' class=" x-form-radio x-form-field" name='Section1A1' type='radio' autocomplete="off" tabindex="17"/>
<span style="font-size:12px;">Yes</span>
<input id='iSection1A1-2' name='Section1A1' type='radio' tabindex="18"/><span style="font-size:12px;">No</span>
</span>


The script



var iSection1A1Yes = new Ext.form.Radio({
id:"iSection1A1-1",
name:"Section1A1",
applyTo: "iSection1A1-1",
checked:false,
disabled:false
});

julian_calaby
20 Jun 2010, 9:44 PM
I'm having almost the exact same issue with a more complicated example. Good to know that it's not my code that's getting in the way.

Any advice?

Condor
20 Jun 2010, 10:53 PM
Because the radio buttons are in the same group you will need to create them both before applying them to the markup, e.g.

var iSection1A1Yes = new Ext.form.Radio({
id:"iSection1A1-1",
name:"Section1A1",
checked:false,
disabled:false
});
var iSection1A1No = new Ext.form.Radio({
id:"iSection1A1-2",
name:"Section1A1",
checked:false,
disabled:false
});
iSection1A1Yes.applyToMarkup('iSection1A1-1');
iSection1A1No.applyToMarkup('iSection1A1-2');

This won't solve your alignment problem though, because applyTo will also create a div wrapper for the radio button.
You can solve this by using different markup: The lSection1Q1 element needs to be display:block and the inner x-form-check-wrap divs need to be float:left. The first x-form-check-wrap div also needs a left margin to make room for the label (which needs to be position:relative).