TextFields Layout

[sempf]

Hi!

How can I put two TextFields directly next to each other with just one label?

(see attachment)

Thanks,
Fabian

[jonathanv]

Here's some code I whipped up recently:

Javascript:



// Multiple fields on one line
Ext.namespace("Ext.ux.form");

Ext.ux.form.MultiField = function(config) {
Ext.ux.form.MultiField.superclass.constructor.call(this, config);
}

Ext.extend(Ext.ux.form.MultiField, Ext.form.Layout, {
onRender: function(el) {
this.ensureTemplatesCreated();

if (typeof this.labelWidth == 'number') {
this.labelStyle = "width: "+ this.labelWidth + "px;";
}

var subsequentFieldsHtml = [];

for (var i = 1; i < this.stack.length; i++)
subsequentFieldsHtml.push(this._subsequentFieldTemplate.apply(Ext.applyIf(Object.clone(this.stack[i]), this)));

this._multiFieldContainerTemplate.append(el, Ext.applyIf(Object.extend(Object.clone(this.stack[0]),
{ subsequentItems: subsequentFieldsHtml.join("") }
), this));
},

ensureTemplatesCreated: function() {
if (this._multiFieldContainerTemplate)
return;

Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate = new Ext.Template(
'<div class="x-form-item {itemCls}">',
'<label for="{id}" style="{labelStyle}">{fieldLabel}{labelSeparator}</label>',
'<div class="x-form-element-multi">',
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
'</div>',
'{subsequentItems}',
'</div>',
'</div><div class="x-form-clear-left"></div>'
);
Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate.disableFormats = true;
Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate.compile();


Ext.ux.form.MultiField.prototype._subsequentFieldTemplate = new Ext.Template(
'<label for="{id}" style="{labelStyle}">{fieldLabel}{labelSeparator}</label>',
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"></div>'
);
Ext.ux.form.MultiField.prototype._subsequentFieldTemplate.disableFormats = true;
Ext.ux.form.MultiField.prototype._subsequentFieldTemplate.compile();
}
});

Ext.form.Form.prototype.multiField = function(c) {
var mf = new Ext.ux.form.MultiField(c);

this.start(mf);

if(arguments.length > 1) {
this.add.apply(this, Array.prototype.slice.call(arguments, 1));
this.end();
}

return mf;
}


CSS:



.x-form-element-multi label, .x-form-element-multi div { padding-left: 4px; display: inline; float: none; }
.x-form-element-multi :first-child { padding-left: 2px; padding-right: 4px; }
.x-form-element-multi label { padding-left: 10px; }


Then when constructing your form:



form.multiField({},
new Ext.form.TextField({
fieldLabel: "Work number",
name: "work_phone_number_value"
}),

new Ext.form.TextField({
fieldLabel: "ext",
name: "work_phone_number_extension"
})
);

[sempf]

Thank you very much! But when I use the code I get the error

Object.clone in not a function

on the line

subsequentFieldsHtml.push(this._subsequentFieldTemplate.apply(Ext.applyIf(Object.clone(this.stack[i]), this)));

[jonathanv]

I've got Prototype in my page as well as Ext. Either chuck that in or just copy the Object.clone method.

[Spirit]

Thx! Exactly what i needed ;)

[sempf]

OK, now it works. I really appreciate your help, but I

[Spirit]

You are right! It doesnt work with fieldset. But my skills aint good enough to improve the code of jonathanv. Thx anyway for the submitted code. Wish I could do such things ;) Maybe in a few months...

But thats not why i m postin, so here is another solution i found while searchin for textfield masks.

http://www.ricardosantos.com.br/extjs/example-form.php

I didnt played much with his code (by now) but i think its worth a look, cause it looks very nice :)

[jonathanv]

I've made a few improvements to the code. Here's the new copy for anyone who is interested.



// Multiple fields on one line
Ext.namespace("Ext.ux.form");

Ext.ux.form.MultiField = function(config) {
Ext.ux.form.MultiField.superclass.constructor.call(this, config);
}

Ext.extend(Ext.ux.form.MultiField, Ext.form.Layout, {
onRender: function(el) {
this.ensureTemplatesCreated();

var subsequentFieldsHtml = [];

for (var i = 1; i < this.stack.length; i++)
subsequentFieldsHtml.push(this._subsequentFieldTemplate.apply(Ext.applyIf(Object.clone(this.stack[i]), this)));

if (typeof this.labelWidth == 'number') {
this.labelStyle = "width: "+ this.labelWidth + "px;";
}

this._multiFieldContainerTemplate.append(el, Ext.applyIf(Object.extend(Object.clone(this.stack[0]),
{ subsequentItems: subsequentFieldsHtml.join("") }
), this));
},

ensureTemplatesCreated: function() {
if (this._multiFieldContainerTemplate)
return;

Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate = new Ext.Template(
'<div class="x-form-item {itemCls}">',
'<label for="{id}" style="{labelStyle}">{fieldLabel}{labelSeparator}</label>',
'<div class="x-form-element-multi">',
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
'</div>',
'{subsequentItems}',
'</div>',
'<div class="x-form-element-multi-clear"></div>',
'</div><div class="x-form-clear-left"></div>'
);
Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate.disableFormats = true;
Ext.ux.form.MultiField.prototype._multiFieldContainerTemplate.compile();


Ext.ux.form.MultiField.prototype._subsequentFieldTemplate = new Ext.Template(
'<label for="{id}" style="{labelStyle}">{fieldLabel}{labelSeparator}</label>',
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}"></div>'
);
Ext.ux.form.MultiField.prototype._subsequentFieldTemplate.disableFormats = true;
Ext.ux.form.MultiField.prototype._subsequentFieldTemplate.compile();
}
});

Ext.form.Form.prototype.multiField = function(c) {
var mf = new Ext.ux.form.MultiField(c);

this.start(mf);

if(arguments.length > 1) {
this.add.apply(this, Array.prototype.slice.call(arguments, 1));
this.end();
}

return mf;
}




.x-form-element-multi .x-form-element { padding-left: 2px; }
.x-form-element-multi > *, .x-form-element-multi > label { float: left; clear: none; width: auto; }
.x-form-element-multi > label { padding-left: 6px; padding-right: 4px; }
.x-form-element-multi-clear { clear: both; padding-bottom: 2px; }