Form layout using X / Y positioning

[Richard]

To enable X / Y positioning of form elements, overide ExtJS with:



Ext.apply(Ext.form.Layout.prototype, {

onRender : function(ct, position){
if(this.el){ this.el = Ext.get(this.el);
}else { var cfg = this.getAutoCreate();
this.el = ct.createChild(cfg, position);
}
if(this.style){
this.el.applyStyles(this.style);
}
if(this.labelAlign){
this.el.addClass('x-form-label-'+this.labelAlign);
}
if(this.hideLabels){
this.labelStyle = "display:none";
this.elementStyle = "padding-left:0;";
}else{
if(typeof this.labelWidth == 'number'){
this.labelStyle = "width:"+this.labelWidth+"px;";
this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
}
if(this.labelAlign == 'top'){
this.labelStyle = "width:auto;";
this.elementStyle = "padding-left:0;";
}
}
var stack = this.stack;
var slen = stack.length;
if(slen > 0){
if(!this.fieldTpl){
var t = new Ext.Template(
'<div class="x-form-item {5}" style="width:{7}px;{6}">',
'<label for="{0}" style="{2}">{1}{4}</label>',
'<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
'</div></div>'
);
t.disableFormats = true;
t.compile();
Ext.form.Layout.prototype.fieldTpl = t;
}

for(var i = 0; i < slen; i++) {
if(stack[i].isFormField){
this.renderField(stack[i]);
}else{
this.renderComponent(stack[i]);
}
}
}
if(this.clear){
this.el.createChild({cls:'x-form-clear'});
}
},

renderField : function(f){

var tPosition=typeof f.xyPosition == 'undefined' ? '' : f.xyPosition+'position:absolute;';

this.fieldTpl.append(this.el, [
f.id, f.fieldLabel,
f.labelStyle||this.labelStyle||'',
this.elementStyle||'',
typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
f.itemCls||this.itemCls||'',
tPosition,
(typeof f.width == 'undefined' ? 30 : f.width)+15+this.labelWidth
]);
}
});


then add the xyPosition config option to your form fields and adjust the height of the fieldset:



myDialogGeneral.Form.fieldset({legend:'Facilities',style:'height:130px'}
,new Ext.form.Checkbox({xyPosition:'left:15px;top:650px;',fieldLabel:'Children',name:'chkWelcomeChildrenFlag'})
,new Ext.form.Checkbox({xyPosition:'left:150px;top:650px;',fieldLabel:'Disabled',name:'chkWelcomeDisabledFlag',width:80})
,new Ext.form.Checkbox({xyPosition:'left:300px;top:650px;',fieldLabel:'Pets',name:'chkWelcomePetsFlag'})
,new Ext.form.TextArea({xyPosition:'top:680px;',fieldLabel:'Facilities Description',name:'txtWelcomeText',maxLength:256,growMin:5,width:400,height:70})
);


now you can do your form layout in any design you want !

What it basically does is position the container div for each of the form fields.

Tested on IE7 and FF2