1. #41
    Sencha User
    Join Date
    May 2009
    Posts
    7
    Vote Rating
    0
    chevanton19 is on a distinguished road

      0  

    Default Some news...

    Some news...


    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:

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

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

  2. #42
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    242
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Thank you very much!

  3. #43
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    242
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    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

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar