Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default [FIXED-162][3.0] VBoxLayout scrollOffset

    [FIXED-162][3.0] VBoxLayout scrollOffset


    The VBoxLayout scrollOffset config option is incorrectly applied to the width instead of the height.

    Example:
    Code:
    Ext.onReady(function(){
        new Ext.Panel({
            title: 'VBoxLayout',
            width: 200,
            height: 200,
            layout: 'vbox',
            layoutConfig: {
                scrollOffset: Ext.getScrollBarWidth()
            },
            autoScroll: true,
            items: [{
                title: 'Item 1',
                flex: 1,
                width: 300
            },{
                title: 'Item 2',
                flex: 1,
                width: 300
            }],
            renderTo: Ext.getBody()
        });
    });
    Fix:
    Code:
    Ext.override(Ext.layout.VBoxLayout, {
        onLayout : function(ct, target){
            Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);
            var cs = this.getItems(ct), cm, ch, margin,
                size = this.getTargetSize(target),
                w = size.width - target.getPadding('lr') /*- this.scrollOffset*/,
                h = size.height - target.getPadding('tb') - this.scrollOffset,
                l = this.padding.left, t = this.padding.top,
                isStart = this.pack == 'start',
                isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
                stretchWidth = w - (this.padding.left + this.padding.right),
                extraHeight = 0,
                maxWidth = 0,
                totalFlex = 0,
                flexHeight = 0,
                usedHeight = 0;
            Ext.each(cs, function(c){
                cm = c.margins;
                totalFlex += c.flex || 0;
                ch = c.getHeight();
                margin = cm.top + cm.bottom;
                extraHeight += ch + margin;
                flexHeight += margin + (c.flex ? 0 : ch);
                maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
            });
            extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;
            var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
            switch(this.align){
                case 'stretch':
                    this.innerCt.setSize(w, h);
                    break;
                case 'stretchmax':
                case 'left':
                    this.innerCt.setSize(innerCtWidth, h);
                    break;
                case 'center':
                    this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
                    break;
            }
            var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),
                leftOver = availHeight,
                heights = [],
                restore = [],
                idx = 0,
                availableWidth = Math.max(0, w - this.padding.left - this.padding.right);
            Ext.each(cs, function(c){
                if(isStart && c.flex){
                    ch = Math.floor(availHeight * (c.flex / totalFlex));
                    leftOver -= ch;
                    heights.push(ch);
                }
            });
            if(this.pack == 'center'){
                t += extraHeight ? extraHeight / 2 : 0;
            }else if(this.pack == 'end'){
                t += extraHeight;
            }
            Ext.each(cs, function(c){
                cm = c.margins;
                t += cm.top;
                c.setPosition(l + cm.left, t);
                if(isStart && c.flex){
                    ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));
                    if(isRestore){
                        restore.push(c.getWidth());
                    }
                    c.setSize(availableWidth, ch);
                }else{
                    ch = c.getHeight();
                }
                t += ch + cm.bottom;
            });
            idx = 0;
            Ext.each(cs, function(c){
                cm = c.margins;
                if(this.align == 'stretch'){
                    c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
                        c.minWidth || 0, c.maxWidth || 1000000));
                }else if(this.align == 'stretchmax'){
                    c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
                        c.minWidth || 0, c.maxWidth || 1000000));
                }else{
                    if(this.align == 'center'){
                        var diff = availableWidth - (c.getWidth() + cm.left + cm.right);
                        if(diff > 0){
                            c.setPosition(l + cm.left + (diff/2), c.y);
                        }
                    }
                    if(isStart && c.flex){
                        c.setWidth(restore[idx++]);
                    }
                }
            }, this);
        }
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,647
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Thanks, fixed in SVN.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1