View Full Version : Table Form Layout

7 Nov 2009, 3:38 PM
Has anyone contributed a form layout that generates fields in the following format:


8 Nov 2009, 8:46 AM
Did you search?

Yes, there is a TableFormLayout.

But you do not want a label for an input element in a separate TD from the element. It would not function as a label (allow click to focus).

Basically, you want two inputs side by side.

8 Nov 2009, 12:14 PM
Thanks for the quick reply,

Yes I came across the new TableFormLayout, and was able to test it.

I made a few changes to the fieldTpl to make the label a separate cell while allowing for label interaction:

Ext.override(Ext.layout.ContainerLayout, {
fieldTpl: (function() {
var t = new Ext.Template(
'<table class="x-form-item {5}" tabIndex="-1" width="100%" cellspacing="0" cellpading="0"><tr>',
'<td style="{2}" class="x-form-item-label"><label for="{0}">{1}{4}</label></td>',
'<td><div class="x-form-element" id="x-form-el-{0}" style="{3}">',
t.disableFormats = true;
return t.compile();
The only issue here is that it breaks the non table form fields with labelAign set to top.

It looks like I have to override Ext.layout.TableLayout instead of Ext.layout.ContainerLayout.

8 Nov 2009, 12:35 PM
This is what I intended to achieve:


In addition to the fieldTpl override, I added this stylesheet block:

/* tableform layout style classes */
.x-table-form-layout-ct .x-table-layout-cell .x-form-field { /* fix for form elements with no border clipping */
margin-top: 0;

.ext-ie .x-table-form-layout-ct .x-table-layout-cell .x-form-trigger { /* ie fix for trigger field positioning */
margin-top: 2px;

.x-table-form-layout-ct .x-table-layout-cell { border-top: 1px solid white; border-bottom: 1px solid #d8d8d8; }
.x-table-form-layout-ct .x-table-layout-cell .x-form-item td { padding: 3px 8px 3px 8px; }
.x-table-form-layout-ct .x-table-layout-cell .x-form-item-label { background-color: #e4e4e4; padding-right: 0; }

and bingo!