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

[chevanton19]

i've discovered a bit more about the problem,i think it originates from the combination of form items colspan values

this is a piece of the code creating my form:

var o_form = new Ext.form.FormPanel({
            autoScroll        : true,
            title             : go_QLabels.get('SERVICEINFO'),
            bodyStyle         : 'padding:5px',
            layout            : 'tableform',
            defaults        : {labelSeparator : ''},
            layoutConfig    : {columns : 4},
            labelWidth         : 90,
            items            : [a_items],
            getJSON            : function(){
                var oJSON = {
                    id             : o_idhd.getValue(),
                    name         : o_name.getValue(),
                    desc        : o_desc.getValue(),
                    url            : o_url.getValue(),
                    ico            : o_ico.getValue(),
                    agroup      : o_agroup_combo.getValue(),
                    mgroup      : o_mgroup_combo.getValue(),
                    inputmode    : o_inputmode.getValue(),
                    as400        : o_as400.getValue() == 'on' ? 1:0,
                    constrain    : o_constrain.getValue() == 'on' ? 1:0
                };
                return oJSON;

the only field combination i found workign is

var a_items = [                            /*colspan*/
            o_name,o_idhd,                        /*2,2*/
            o_url,o_ico,                        /*2,2*/
            o_agroup_combo,o_mgroup_combo,        /*2,2*/
            o_as400,o_constrain,o_inputmode,    /*1,1,2*/
            o_desc                                /*4*/
        ];

any other attempts had a bad result, for example if u change o_as400,o_constrain,o_inputmode in o_inputmode,o_as400,o_constrain form's layout is broken.

luckily i can keep this field disposition even if it's not teh desired one!!
hope this can help a bit on debugging or fixing the stuff if someone want to!

using Ext 3.2.1 with explorer 7

[Grolubao]

Thank you very much!

[Grolubao]

I implemented a couple of nice modifications:

- minWidth/minHeight that each of the component will have before a scroll bar appears
- Dynamic height on the components

Ext.namespace("Ext.ux.layout");

Ext.ux.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
    monitorResize: true,
    labelAutoWidth: false,
    packFields: false,
    trackLabels: Ext.layout.FormLayout.prototype.trackLabels,
    setContainer: function(ct) {
        Ext.layout.FormLayout.prototype.setContainer.apply(this, arguments);
        if (ct.labelAlign == 'top') {
            this.labelAutoWidth = false;
            if (this.fieldSpacing)
               this.elementStyle = 'padding-left: ' + this.fieldSpacing + 'px;';
        } else {
            if (this.labelAutoWidth)
                this.labelStyle = 'width: auto;';
            if (this.packFields && !ct.labelWidth)
                ct.labelWidth = 1;
        }
        if (this.fieldSpacing)
            this.labelStyle += 'padding-left: ' + this.fieldSpacing + 'px;';
        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.anchor)
                c.width = 1;
            Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, cell);
        }
    },
    getLayoutTargetSize : Ext.layout.AnchorLayout.prototype.getLayoutTargetSize,
    parseAnchorRE : Ext.layout.AnchorLayout.prototype.parseAnchorRE,
    parseAnchor : Ext.layout.AnchorLayout.prototype.parseAnchor,
    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();
        if (this.fieldSpacing)
            viewSize.width -= this.fieldSpacing;
        var aw, ah;
        if (ct.anchorSize) {
            if (Ext.isNumber(ct.anchorSize)) {
                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;
        var x, col, columnWidthsPx, columnHeightPx,w;
        // calculate label widths
        if (this.labelAutoWidth) {
            var labelWidths = new Array(this.columns);
            var pad = ct.labelPad || 5;
            for (i = 0; i < this.columns; i++)
                labelWidths[i] = ct.labelWidth || 0;
            // first pass: determine maximal label width for each column
            for (i = 0; i < len; i++) {
                c = cs[i];
                // get table cell
                x = c.getEl().parent(".x-table-layout-cell");
                // get column
                col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
                // set the label width
                if (c.label && c.label.getWidth() > labelWidths[col])
                    labelWidths[col] = c.label.getWidth();
            }
            // second pass: set the label width
            for (i = 0; i < len; i++) {
                c = cs[i];
                // get table cell
                x = c.getEl().parent(".x-table-layout-cell");
                // get column
                col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
                // get label
                if (c.label) {
                    // set the label width and the element padding
                    c.label.setWidth(labelWidths[col]);
                    c.getEl().parent(".x-form-element").setStyle('paddingLeft',(labelWidths[col] + pad - 3) + 'px');
                }
            }
        }
        if (!this.packFields) {
            var rest = viewSize.width;
            var restHeight = viewSize.height;
            columnWidthsPx = new Array(this.columns);
            columnHeightPx = new Array(this.rows);
            // Calculate the widths in pixels
            for (j = 0; j < this.columns; j++) {
                if (this.columnWidths)
                    columnWidthsPx[j] = Math.floor(viewSize.width * this.columnWidths[j]);
                else
                    columnWidthsPx[j] = Math.floor(viewSize.width / this.columns);
                
                rest -= columnWidthsPx[j];
            }
            for (j = 0; j < this.rows; j++) {
                columnHeightPx[j] = Math.floor(viewSize.height / this.rows);
                
                restHeight -= columnHeightPx[j];
            }
            // Correct the last column width, if necessary
            if (rest > 0)
                columnWidthsPx[this.columns - 1] += rest;
            if (restHeight > 0)
                columnHeightPx[this.rows - 1] += restHeight;
        }
        for (i = 0; i < len; i++) {
            c = cs[i];
            // get table cell
            x = c.getEl().parent(".x-table-layout-cell");
            if (!this.packFields) {
                // get column
                col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
                // get cell width (based on column widths)
                for (j = col, w = 0; j < (col + (c.colspan || 1)); j++)
                    w += columnWidthsPx[j];
                
                for (j = 0, h = 0; j < (c.rowspan || 1); j++){
                    h += columnHeightPx[j];
                }
                
                // set table cell width
                
                x.setSize(w < this.minWidth ? this.minWidth : w, h < this.minHeight ? this.minHeight : h);
                c.setSize(w < this.minWidth ? this.minWidth : w,h < this.minHeight ? this.minHeight : h);
            }
            // perform anchoring
            if (c.anchor) {
                var a, h, cw, ch;
                if (this.packFields)
                    w = x.getWidth();
                // get cell width (subtract padding for label) & height to be base width of anchored component
                this.labelAdjust = c.getEl().parent(".x-form-element").getPadding('l');
                if (this.labelAdjust && ct.labelAlign == 'top')
                    w -= this.labelAdjust;
                h = x.getHeight();
                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;