PDA

View Full Version : input in Radio reparented to wrong div?



deitch
26 Nov 2007, 11:22 AM
Has anyone seen an issue where the boxLabel for a Radio has its own div? In short, the generated HTML looks like this:



<div id="ext-gen341" class="x-plain-body x-plain-body-noheader" style="width: 163px;">
<input id="ext-comp-1023" class="x-form-radio x-form-field" type="radio" name="ext-comp-1023" autocomplete="off" checked=""/>
<div id="ext-gen345" class="x-form-check-wrap">
<label id="ext-gen346" class="x-form-cb-label" for="ext-comp-1023">Existing Person</label>
</div>
</div>


Note that the <input>...</input> is reparented to the x-plain-body div, while the x-form-check-wrap div, which should wrap the <input> AND <label> is after. This causes the input to be on one line, the label to be on the next, rather than to the right.

I stepped through the onRender() section of ext-all-debug, and it appears to do the right thing in the routine - single div of class x-form-check-wrap, with two children <input> and <label>. Somewhere further down the line it is reparented.

The JS code is very simple:


var radioE = new Ext.form.Radio({
boxLabel: 'Existing Person',
name: 'personType',
checked: true
});


It is inside a form panel, layout column (to get two of them side-by-side).

Anyone seen this or have ideas?

Thanks,
Avi

deitch
26 Nov 2007, 12:00 PM
Somewhat narrowing it down: this only occurs if the column that the radio is set in is not given layout of 'form'.

vtswingkid
26 Nov 2007, 1:55 PM
I am seeing the same problem

The attached image is a window with a form.
The form has a two column layout with 3 radios in each form.

deitch
26 Nov 2007, 1:58 PM
I worked around it by the following:



self.form = new Ext.form.FormPanel({
items: [{
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: {
xtype: 'radio',
boxLabel: 'Existing Person',
name: 'personType',
hideLabel: true,
checked: true
}
},
{
columnWidth: .5,
layout: 'form',
items: {
xtype: 'radio',
boxLabel: 'New Person',
name: 'personType',
hideLabel: true,
checked: false
}
}]
}
]
});


Basically, I had to wrap each radio in a single-item form element. Ugly, but works.

vtswingkid
26 Nov 2007, 2:11 PM
I posted as bug:
http://extjs.com/forum/showthread.php?p=91621#post91621