In my case, in TableFormLayout, I needed to specify individual labelWidths for columns. Hence, I expanded on the OP's code a bit. Now, you should be able to say something like:
Code:
{
xtype: 'panel',
layout: 'tableform',
border: false,
layoutConfig: { columns: 2, columnWidths: [0.65, 0.35], columnLabelWidths: [73, 20] },
items: [
{ fieldLabel: 'Created By:', xtype: 'textfield', colspan: 2 },
{ fieldLabel: 'Creation Date:', xtype: 'datefield' },
{ fieldLabel: 'to:', xtype: 'datefield' },
{ fieldLabel: 'Modified By', xtype: 'textfield', colspan: 2 },
{ fieldLabel: 'Modified Date:', xtype: 'datefield' },
{ fieldLabel: 'to:', xtype: 'datefield' }
]
}
Here are the changes:
Code:
Ext.ux.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
monitorResize: true,
setContainer: function() {
Ext.layout.FormLayout.prototype.setContainer.apply(this, arguments);
this.currentRow = 0;
this.currentColumn = 0;
this.cells = [];
},
renderItem: function(c, position, target) {
if (c && !c.rendered) {
var cell = Ext.get(this.getNextCell(c));
cell.addClass("x-table-layout-column-" + this.currentColumn);
if (c && !c.rendered && c.isFormField && c.inputType != 'hidden') {
var elementStyle = this.elementStyle;
var labelStyle = this.labelStyle;
if (this.columnLabelWidths) {
var labelWidth = this.columnLabelWidths[this.currentColumn];
if (labelWidth) {
var pad = (typeof this.labelPad == 'number' ? this.labelPad : 5);
labelStyle = "width:" + labelWidth + "px;";
elementStyle = "padding-left:" + (labelWidth + pad) + 'px';
}
}
var args = [
c.id, c.fieldLabel,
this.getLabelStyle(labelStyle, c.labelStyle),
elementStyle || '',
typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
(c.itemCls || this.container.itemCls || '') + (c.hideLabel ? ' x-hide-label' : ''),
c.clearCls || 'x-form-clear-left'
];
if (typeof position == 'number') {
position = cell.dom.childNodes[position] || null;
}
if (position) {
this.fieldTpl.insertBefore(position, args);
} else {
this.fieldTpl.append(cell, args);
}
c.render('x-form-el-' + c.id);
} else {
Ext.layout.FormLayout.superclass.renderItem.call(this, c, 0, cell);
}
}
},
getAnchorViewSize: function(ct, target) {
return target.dom == document.body ? target.getViewSize() : target.getStyleSize();
},
onLayout: function(ct, target) {
Ext.ux.TableFormLayout.superclass.onLayout.call(this, ct, target);
if (!target.hasClass("x-table-form-layout-ct")) {
target.addClass("x-table-form-layout-ct");
}
var viewSize = this.getAnchorViewSize(ct, target);
var aw, ah;
if (ct.anchorSize) {
if (typeof ct.anchorSize == "number") {
aw = ct.anchorSize;
} else {
aw = ct.anchorSize.width;
ah = ct.anchorSize.height;
}
} else {
aw = ct.initialConfig.width;
ah = ct.initialConfig.height;
}
var cs = ct.items.items, len = cs.length, i, j, c, a, cw, ch;
var x, w, h, col, colWidth, offset;
for (i = 0; i < len; i++) {
c = cs[i];
// get table cell
x = c.getEl().parent(".x-table-layout-cell");
if (this.columnWidths) {
// get column
col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
// get cell width (based on column widths)
colWidth = 0, offset = 0;
for (j = col; j < (col + (c.colspan || 1)); j++) {
colWidth += this.columnWidths[j];
offset += 10;
}
w = (viewSize.width * colWidth) - offset;
} else {
// get cell width
w = (viewSize.width / this.columns) * (c.colspan || 1);
}
// set table cell width
x.setWidth(w);
// get cell width (-10 for spacing between cells) & height to be base width of anchored component
w = w - 10;
h = x.getHeight();
// perform anchoring
if (c.anchor) {
a = c.anchorSpec;
if (!a) {
var vs = c.anchor.split(" ");
c.anchorSpec = a = {
right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
};
}
cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined;
ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;
if (cw || ch) {
c.setSize(cw || undefined, ch || undefined);
}
}
}
},
parseAnchor: function(a, start, cstart) {
if (a && a != "none") {
var last;
if (/^(r|right|b|bottom)$/i.test(a)) {
var diff = cstart - start;
return function(v) {
if (v !== last) {
last = v;
return v - diff;
}
};
} else if (a.indexOf("%") != -1) {
var ratio = parseFloat(a.replace("%", "")) * .01;
return function(v) {
if (v !== last) {
last = v;
return Math.floor(v * ratio);
}
};
} else {
a = parseInt(a, 10);
if (!isNaN(a)) {
return function(v) {
if (v !== last) {
last = v;
return v + a;
}
};
}
}
}
return false;
},
adjustWidthAnchor: function(value, comp) {
return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
},
adjustHeightAnchor: function(value, comp) {
return value;
},
getLabelStyle: function(labelBaseStyle, s) {
var ls = '', items = [labelBaseStyle, s];
for (var i = 0, len = items.length; i < len; ++i) {
if (items[i]) {
ls += items[i];
if (ls.substr(-1, 1) != ';') {
ls += ';'
}
}
}
return ls;
}
});
Ext.layout.TableFormLayout (v2)
Apply classes to individual rows?
Reply With Quote