[3.0] Ext.ux.layout.TableFormLayout - table layout with form field labels

[smit_al]

Installed the 3.1.1 version today. Had to change the parseInt line to match post 14 to get the columnWidths to work. Without it the columnWidths were ignored.

[JamesC]

Ok apologies for those of you with issues with the parseint, the forum is stripping the \ from the code! Will update the code asap!

[JamesC]

OK its fixed in the original post, issue was that the [ p h p ] tags were stripping the \ from the regex!

[Iveco]

Awesome, exactly what I was needing right now. This is why I love the community here.

I was using the ExtJS TableLayout on a Formpanel and had several troubles with missing fieldLabels etc.

Just use this tablelayout function and all formpanel functionality is working again. Should be included by default in ExtJs IMHO.

Thx.

[jukkajurvansuu]

Great extension! This should be standard layout in ExtJS imo.

[TonySteele]

Just switched my app to ExtJs 3.2 for quick test and TableFormLayout is failing at:

                    c.anchorSpec = a = {
                        right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
                        bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
                    };

calls parseAnchor(...) in ext-all-debug.js (20025) which fails at

            if(this.parseAnchorRE.test(a)){

a='100%'
with: 'this.parseAnchorRE' is null or not an object

my code is :

            items: [{
                layout: 'tableform',
                border: false,
                layoutConfig: { columns: 2 },
                labelAlign: 'top',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name: 'name',
                    anchor: '100%',
                    colspan: 2
                },{
                    xtype: 'combo',
                    fieldLabel: 'Layout',
                    name: 'layout',
                    anchor: '100%'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Site',
                    name: 'site',
                    anchor: '100%'
                }]
            }

[ReBorn]

Worked for me under 3.2.0

Ext.ux.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
    monitorResize: true,
    trackLabels: Ext.layout.FormLayout.prototype.trackLabels,
    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);
            Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, cell);
        }
    },
    getLayoutTargetSize : Ext.layout.AnchorLayout.prototype.getLayoutTargetSize,
    parseAnchor : function(a, start, cstart){
        if(a && a != 'none'){
            var last;
            if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
                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;   // percentage
                return function(v){
                    if(v !== last){
                        last = v;
                        return Math.floor(v*ratio);
                    }
                }
            }else{
                a = parseInt(a, 10);
                if(!isNaN(a)){                            // simple offset adjustment
                    return function(v){
                        if(v !== last){
                            last = v;
                            return v + a;
                        }
                    }
                }
            }
        }
        return false;
    },
    getTemplateArgs : Ext.layout.FormLayout.prototype.getTemplateArgs,
    isValidParent : Ext.layout.FormLayout.prototype.isValidParent,
    onRemove : Ext.layout.FormLayout.prototype.onRemove,
    isHide : Ext.layout.FormLayout.prototype.isHide,
    onFieldShow : Ext.layout.FormLayout.prototype.onFieldShow,
    onFieldHide : Ext.layout.FormLayout.prototype.onFieldHide,
    adjustWidthAnchor : Ext.layout.FormLayout.prototype.adjustWidthAnchor,
    adjustHeightAnchor : Ext.layout.FormLayout.prototype.adjustHeightAnchor,
    getLabelStyle : Ext.layout.FormLayout.prototype.getLabelStyle,
    onLayout : function(ct, target) {
        Ext.ux.layout.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.getLayoutTargetSize();
        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 = this.getRenderedItems(ct), 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);
                }
            }
        }
    }
});

Ext.Container.LAYOUTS["tableform"] = Ext.ux.layout.TableFormLayout;

[JamesC]

This is currently untested in 3.2 will give it a go and try to get any fixes done asap!

[ReBorn]

Well, for now I have two unresolved problems with my fix above:
1) Unable to set separators (or whitespaces) between columns -- with 100% width of elements label of the second element in the row is placed too near first element's border. Especially noted with colspann'ed elements.
2) It would be lovely to set individual labelWidth for each elements (like textboxes) without touching parent container (like form or tab). If I 'fix' label width with CSS (by labelStyle), render is broken, when width of the label exceeds the labelWidth of the parent container.

Can anybody advice something ?

[pkullmann]

Nice work! Works well for me with 3.2.0 / IE8,FF,Chrome

However, I'd like to see the capability of auto-adjusting the labelWidth of each column to the longest label. In Principle this would be simple, if the labels were rendered into a separate columns of the underlying table. Another approach might be to do some postprocessing after the items have been layed out.
Any ideas on how to go about it, are welcome. I think I will give it a try....