PDA

View Full Version : [Duplicate] TableFormLayout



durlabh
30 Jun 2008, 11:24 AM
Animal was kind enough to post working code for TableForm layout. However, I noticed that it did not allow setting the labelWidth to me. Hence, I added the code from FormLayout.setContainer to TableFormLayout.setContainer. Now the complete code looks as:



/**
* Needed for tableform layout
**/
Ext.override(Ext.layout.FormLayout, {
fieldTpl: (function() {
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="{3}">',
'</div><div class="{6}"></div>',
'</div>'
);
t.disableFormats = true;
return t.compile();
})()
});

/**
* Table form layout
**/
Ext.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
setContainer : function(ct){
Ext.layout.TableFormLayout.superclass.setContainer.call(this, ct);
if(ct.labelAlign){
ct.addClass('x-form-label-'+ct.labelAlign);
}

if(ct.hideLabels){
this.labelStyle = "display:none";
this.elementStyle = "padding-left:0;";
this.labelAdjust = 0;
}else{
this.labelSeparator = ct.labelSeparator || this.labelSeparator;
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';
}
if(ct.labelAlign == 'top'){
this.labelStyle = "width:auto;";
this.labelAdjust = 0;
this.elementStyle = "padding-left:0;";
}
}
},

fieldTpl: Ext.layout.FormLayout.prototype.fieldTpl,

renderItem : function(c, position, target) {
if (c && !c.rendered) {
Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, Ext.get(this.getNextCell(c)));
}
}
});
Ext.Container.LAYOUTS['tableform'] = Ext.layout.TableFormLayout;
I'm sure that this is a great addition to tabular forms! Thanks animal!