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

      0  

    Default


    Here's an initial attempt, let me know of your findings:

    Code:
    Ext.namespace("Ext.ux.layout");
    
    Ext.ux.layout.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);
                Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, cell);
            }
        },
        getAnchorViewSize : Ext.layout.AnchorLayout.prototype.getAnchorViewSize,
        getTemplateArgs : Ext.layout.FormLayout.prototype.getTemplateArgs,
        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.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 : Ext.layout.FormLayout.prototype.getLabelStyle
    });
    
    Ext.Container.LAYOUTS["tableform"] = Ext.ux.layout.TableFormLayout;

  2. #12
    Ext JS Premium Member
    Join Date
    Oct 2008
    Location
    Nuremberg, Germany
    Posts
    49
    Vote Rating
    0
    dreas is on a distinguished road

      0  

    Default


    Seems to work fine with ExtJS 3.0 RC1.1 so far. Thanks a lot!

  3. #13
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    466
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    It supports anchoring...
    Can I turn off anchoring support? Because I want to get fixed form layout at different screen size.

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You don't have to specify an anchor config in the child items.

  5. #15
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    466
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    Animal ,thank you for reply, but the 'tableform' layout by default supports anchoring, and I don't use anchor config in the child items in anyway!

  6. #16
    Ext User
    Join Date
    Feb 2009
    Posts
    53
    Vote Rating
    0
    MacSimon is on a distinguished road

      0  

    Default


    Hi,

    Quote Originally Posted by JamesC View Post
    N.B
    The columnWidths in the layoutConfig are optional, if not specified the columns will be evenly distributed.
    Is it possible to set a fixed width (in px) for the columns through the layoutConfig

  7. #17
    Ext User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    0
    freemanxp is on a distinguished road

      0  

    Default


    Quote Originally Posted by JamesC View Post
    This is a replacement for the old unmaintained TableFormLayout (here), and allows form elements to be rendered in a table. It supports anchoring and the standard table layout column spanning etc.

    Code is attached and can be dropped directly into examples directory

    N.B
    The columnWidths in the layoutConfig are optional, if not specified the columns will be evenly distributed.

    -------------------------------- 3.0 update
    Currently this is not supported by ext js 3.0 due to the overriding of fieldTpl in container layout which breaks *everything*. I'm working on a 3.0 compatible version (nearly finished), but will post it in the 3.0 forums when its done and the forums exist...

    Any news on the 3.0 compatible version?

  8. #18
    Ext JS Premium Member
    Join Date
    Oct 2008
    Location
    Nuremberg, Germany
    Posts
    49
    Vote Rating
    0
    dreas is on a distinguished road

      0  

    Default


    Quote Originally Posted by freemanxp View Post
    Any news on the 3.0 compatible version?
    Check the first post on the second page.

  9. #19
    Sencha Premium Member mw-flow's Avatar
    Join Date
    Dec 2007
    Location
    Munich, Germany
    Posts
    113
    Vote Rating
    1
    mw-flow is on a distinguished road

      0  

    Default


    Quote Originally Posted by dreas View Post
    Seems to work fine with ExtJS 3.0 RC1.1 so far. Thanks a lot!
    And still does work with 3.0 RC2.

  10. #20
    Ext User
    Join Date
    Jun 2009
    Posts
    24
    Vote Rating
    0
    anystrike is on a distinguished road

      0  

    Default


    this plugin allow to insert a item inside a specific position cell?
    like this Ext.getCmp('table').insert(3,object)

    Thanks