View Full Version : [2.2] Re: override x-form-element

13 Sep 2008, 12:48 PM
I couldn't answer this post because it is in the premium forum. So I'm answering here.

This is puzzling me for a couple of days. I want images instead of fieldLabels. In that case the gap between the image and the field is too wide, so I thought to override this.

This example has 2 Ext.form.TextFields, from which I want to override the x-form-element, in order to manage the left padding of the labels. But whatever I do, FireBug always shows

<div id="x-form-el-ext-comp-1001" class="x-form-element" style="padding-left: 105px;">Overriding the CSS style isn't the right approach because Ext.layout.FormLayout sets the padding-left for the div holding the label using the configured labelWidth and some extra padding. If I understand what you want you can probably get the right results by setting the labelWidth to something right around the width of your image.

For more complicated changes you might have to override Ext.layout.FormLayout.setContainer() and look particularly at this part near the beginning:

ct.labelWidth = ct.labelWidth || 100;
if(typeof ct.labelWidth == 'number') {
var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
this.labelAdjust = ct.labelWidth+pad;
this.labelStyle = "width:"+ct.labelWidth+"px;";
this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
Hope this helps.

13 Sep 2008, 11:45 PM
Original post (http://extjs.com/forum/showthread.php?t=47129)
Thanks for pointing me in the right direction :) Still I can't get is right. Allthough I assigned labelWidth
layoutConfig:{labelWidth:21,labelSeparator:'',labelAlign:'left',labelAdjust:0} the width remains 105px. I think there might be a bug here, because the layout seems to ignore the layoutConfig, allthough the API docs tell otherwise ("labelWidth: (Number) The default width in pixels of field labels (defaults to 100)"). The only way to override this is by hard-coding the style:

var t = new Ext.Template(
'<div class="x-form-item {5}" tabIndex="-1">',
'<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
'<div class="x-form-element" id="x-form-el-{0}" style="padding-left:30px;">',
'</div><div class="{6}"></div>',
t.disableFormats = true;
Ext.layout.FormLayout.prototype.fieldTpl = t;
but then there is another problem: the field width doesn't seem to grow accordingly. The field (i.e. the <input>) does render nice along the image, but is missing the ratio with the panel. Adjusting the width in the Ext.form.TextField config (i.e. width=150) has no effect, so now there is a gap right next to the field to the right side edge of the panel. Could this be a small bug?

14 Sep 2008, 3:49 AM
In the original thread Jozef Sakalos suggested to put labelWidth in the form config instead of the layoutConfig. Now it works as expected :)
Thanks to Mike and Jozef.