1. #11
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    Quote Originally Posted by raphac View Post
    if I use this version:
    http://www.extjs.com/forum/showthrea...566#post330566

    the code works

    Code:
    var cadastroForm = {
                xtype: 'form',
                defaultType: 'textfield',
                labelAlign: 'top',
                labelWidth: 55,
                layout: 'tableform',
                layoutConfig: {
                    columns: 3,
                    columnWidths: [0.25,0.5,0.25]
                },
                items:[{
                    fieldLabel: 'Send From',
                    anchor:'100%',
                    labelStyle: 'font-weight:bold;',
                },{
                    fieldLabel: 'Send To',
                    anchor:'100%'
                },{
                    fieldLabel: 'Check me',
                    xtype: 'checkbox',
                    anchor:'100%'
                },{
                    fieldLabel: 'Subject',
                    anchor:'100%',
                    colspan: 3
                },{
                    xtype: 'textarea',
                    anchor: '100%',
                    colspan: 3
                }]
    }
    If I use this version 3.0, the code not works.

    If I commented this line:
    columnWidths: [0.25,0.5,0.25]
    works...
    I have the same problem, but if I use the old version: http://www.extjs.com/forum/showthrea...566#post330566 everything works with 3.1 oO

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

      0  

    Default


    So your not using the new version and it works? Hmm strange I'm using the new version with no problems... check the first post again and let me know!

  3. #13
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    yeah, exactly

    If I use the old version everything works, but If I use the version of the first post and use columnWidths, I have a problem, like the photo posted by raphac

    Like I quoted, if I comment that line, everythings works ok

    I used the example code posted by raphac

    []'s

  4. #14
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    Well, the old version has a problem, if I put a FormPanel in a window and resize the window, the window disapear..

    I simply copy and past this part above of the old version on the new and everything works, something in this part is wrong, I guess

    Code:
    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);
                    }
                }
            }
    EDIT

    I think the problem is in this line (it was a "\")

    Wrong:
    col = parseInt(x.dom.className.replace(/.*x-table-layout-column-([d]+).*/, "$1"));

    Write:
    col = parseInt(x.dom.className.replace(/.*x-table-layout-column-([\d]+).*/, "$1"));

  5. #15
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    607
    Vote Rating
    1
    mdissel is on a distinguished road

      0  

    Default


    I've added the fix from the previous post and make it compatible with the current 3.1* svn version (rev. 5899).. Not fully tested yet!

    Code:
    Ext.namespace("Ext.ux.layout");
    
    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(!this.table){
                this.table = target.createChild(
                    Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
            }
            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 : 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();
            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);
                    }
                }
            }
        }
    });
    
    Ext.Container.LAYOUTS["tableform"] = Ext.ux.layout.TableFormLayout;

  6. #16
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    well, I tested and got this error: this.getLayoutTargetSize is not a function

    The two codes above works with me. I really don't know If they are equal because I've tested many things and I'm completly lost in my versions....hehe
    I've commented the 2 lines that had the error I said

    Code 1:
    Code:
    Ext.namespace("Ext.ux.layout");
    
    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(!this.table){
                this.table = target.createChild(
                    Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
            }
            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,
        getAnchorViewSize : Ext.layout.AnchorLayout.prototype.getAnchorViewSize,
        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();
            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);
                    }
                }
            }
        }
    });
    
    Ext.Container.LAYOUTS["tableform"] = Ext.ux.layout.TableFormLayout;
    Code 2:
    Code:
    Ext.namespace("Ext.ux.layout");
    
    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) {
                if(c.isFormField && c.fieldLabel){
                    if(!c.allowBlank){
                        c.fieldLabel = (c.fieldLabel || '') + "<span class=\"required\">*</span>";
                    }
                }
                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,
        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.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];
                x = c.getEl().parent(".x-table-layout-cell");
    
                if (this.columnWidths) {
                    
                    col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
                    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 {
                    w = (viewSize.width / this.columns) * (c.colspan || 1);
                }
    
                x.setWidth(w);
                w = w - 10;
                h = x.getHeight()
    
                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;

  7. #17
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    607
    Vote Rating
    1
    mdissel is on a distinguished road

      0  

    Default


    are you using the latest rev. 5899 (or newer) from the svn trunk?

    in that rev. Ext.layout.AnchorLayout.prototype.getAnchorViewSize doesn't exist anymore..

  8. #18
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    Oh, that's it, sorry. I didn't read the rev. that you posted.
    []'s

  9. #19
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    I used the rev you said and got the same error...

    this.getLayoutTargetSize is not a function

    []'s

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

      0  

    Default


    Guys, have hopefully fixed compatability with 3.1.1 now - let me know!