[4.0.7] Ext.ux.layout.Center

[vadimv]

Bug can be replicated when the browser window is resized, when horizontal scroll is shown, and when the center-item is bigger then then its container, the left margin gets negative values which should not be, because otherwise is impossible to see that hidden part.

Ext.define('Ext.ux.layout.Center', {
    extend: 'Ext.layout.container.Fit',
    alias: 'layout.ux.center',
    
    setItemSize : function(item, width, height){
        this.owner.addCls('ux-layout-center');
        item.addCls('ux-layout-center-item');


        if (height > 0) {
            if (width) {
                width = item.width;
                if (Ext.isNumber(item.widthRatio)) {
                    width = Math.round(this.owner.el.getWidth() * item.widthRatio);
                }
            }
            item.setSize(width, height);
            var marginLeft = Math.round((this.owner.el.getWidth() - width) * 0.5);
            item.margins.left = marginLeft  > 0 ?  marginLeft : 0; ___// added
                 // was:  item.margins.left =  marginLeft;
        }


    }
});

After fixing this part, noticed that the left margin can't have 0 values because of the wrong if condition in the fit layout in onLayout method:

Ext.define('Override.layout.container.Fit', {
    override: 'Ext.layout.container.Fit',


    onLayout : function() {
        var me = this,
            size,
            item,
            margins;
        me.callParent();


        if (me.owner.items.length) {
            item = me.owner.items.get(0);
            margins = item.margins || me.defaultMargins;
            size = me.getLayoutTargetSize();
            size.width  -= margins.width;
            size.height -= margins.height;
            me.setItemBox(item, size);


            // If any margins were configure either through the margins config, or in the CSS style,
            // Then positioning will be used.
            if (margins.left != null || margins.top != null) { // changed
                        //was: if (margins.left || margins.top)
                item.setPosition(margins.left, margins.top);
            }
        }
    }
});

In this way I can have the child centered with equal margins when the child size is less then containers's; and see the left objects(the one with black border and with "link" name, see picture attached) when child size is higher then container's (or saying different the child top left corner is aligned/corresponds with the left start of the horizontal scroll bar).

Screen shot 2012-05-08 at 12.04.16 PM.jpg

[evant]

Does this still happen in 4.1? The Fit layout (and subsequently Center) have changed fairly significantly.

[vadimv]

didn't try, and won't because the app was made on 4.0.7, and aren't any plans yet to upgrade it to 4.1. Yes I've seen that layout fit and center was changed in 4.1.

[evant]

Ok, in that case it would be good to have a test case to check if it's resolved for 4.1.