1. #21
    Ext User
    Join Date
    Mar 2008
    Posts
    118
    Vote Rating
    0
    smit_al is on a distinguished road

      0  

    Default


    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.

  2. #22
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


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

  3. #23
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


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

  4. #24
    Sencha Premium Member Iveco's Avatar
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    70
    Vote Rating
    1
    Iveco is on a distinguished road

      0  

    Default


    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.
    German EXT-User and -Lover :-).

  5. #25
    Touch Premium Member
    Join Date
    Jan 2009
    Posts
    18
    Vote Rating
    0
    jukkajurvansuu is on a distinguished road

      0  

    Default


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

  6. #26
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    51
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default Problems with 3.2.0

    Problems with 3.2.0


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

    Code:
                        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
    Code:
                if(this.parseAnchorRE.test(a)){
    a='100%'
    with: 'this.parseAnchorRE' is null or not an object

    my code is :

    Code:
                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%'
                    }]
                }

  7. #27
    Ext User
    Join Date
    Mar 2010
    Posts
    12
    Vote Rating
    0
    ReBorn is on a distinguished road

      0  

    Default


    Worked for me under 3.2.0

    Code:
    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;

  8. #28
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


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

  9. #29
    Ext User
    Join Date
    Mar 2010
    Posts
    12
    Vote Rating
    0
    ReBorn is on a distinguished road

      0  

    Default


    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 ?

  10. #30
    Ext User
    Join Date
    Mar 2010
    Posts
    10
    Vote Rating
    0
    pkullmann is on a distinguished road

      0  

    Default


    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....