[4.1 RC1] Layouting/Size updating issues

[DiscoBoy]

I have a problem with updating the size of an viewport like container. To make regions in my site behave like a viewport I use divs that are positioned absolutely with top/left/bottom/right styles. I created a plugin that does more or less the same as the vieport -> listening to onWindowResize-events and subsuquently updating its size.

This worked nicely in ExtJS 4.0! Now in 4.1 I set the initial width/height after the container has rendered to not "stamp" width/height into my DOM. So initially everything goes well but as soon as I resize my window, the container updates to that size AND writes height/width to the DOM. Therefore in all following resize events my container stays in a fixed size!

How can this be avoided in ExtJS 4.1?

The important parts of my plugin
-- Step 1 --
// From Viewport: Important to start life as the proper size (to avoid extra layouts)
// But after render so that the size is not stamped into the body
container.on('afterrender', function() {
    var x = (this.getTop() + this.getBottom()),
          y = (this.getLeft() + this.getRight());
    this.height = Ext.Element.getViewportHeight() - y;
    this.width = Ext.Element.getViewportWidth() - x;
}, container);

-- Step 2 --
Ext.EventManager.onWindowResize(me.adjustSize, me);

-- Step 3 --
adjustSize: function(width, height) {
    // Only resize if width & height differ from current values to avoid useless layouts
    if(width != this.width || height != this.height) {
        var cmp = this.getCmp(),
              el = cmp.el;
        cmp.setSize(el.getPageBox());
    }
} 

[DiscoBoy]

Solved it now by unsetting the dom width/height after every resize! Not sure if this is the right way? ...

// ExtJS 4.1 stamps the height & width into the DOM so we need to unset it
container.on('resize', function(cmp) {
    cmp.el.dom.style.height = null;
    cmp.el.dom.style.width = null;
}); 

[dongryphon]

I don't see from the code you've posted why the sizes in the DOM would effect your plugin. It seems to just call setSize. Are you finding that calling setSize is now respecting the new size?

[DiscoBoy]

The sizes set in DOM do effect my plugin because after the first resize my DIV element with

top: 20px;
bottom: 20px;
right: 20px;
left: 20px;

becomes

top: 20px;
bottom: 20px;
right: 20px;
left: 20px;
width: 380px;
height: 220px;

From now on the DIV element has a fixed box with/height which always stays the same and does not resize anymore on browser resizing. This results for instance in appearing scrollbars...

[dongryphon]

The sizes set in DOM do effect my plugin because after the first resize my DIV element

From now on the DIV element has a fixed box with/height which always stays the same and does not resize anymore on browser resizing. This results for instance in appearing scrollbars...

Sorry for any confusion - I was not trying to say the sizes in the DOM have no effect. Rather that the code you've shown does not help explain *why* these sizes impact your plugin... understanding that part would hopefully lead to a solid solution.

Is the plugin source available?

[DiscoBoy]

The effect of this fixed sizes mean that the underlying div never gets resized. This leads also in the plugin to adjust with a wrong size in

cmp.setSize(el.getPageBox()); 

el.getPageBox therefor returns now the fixed DIV size which is wrong of course! Imagine an Ext.Viewport which stays in its intial size and causes scrollbars to appear or which fills only part of the browser window after a resize!

The code of my plugin is (Works now in 4.0 and 4.1 because I delete the width/height on "resize"):

Ext.define('APP.plugin.FlexContainer', {
    extend: 'Ext.AbstractPlugin',
    requires: [
        'Ext.EventManager'
    ],
    alias: 'plugin.flexcontainer',
    pluginId: 'flexcontainer',
    init: function(container) {
        // Define & create the DOM node we should render to
        container.flexElement = Ext.isEmpty(container.flexElement) ? 'body' : container.flexElement;
        container.id = container.flexElement;
        container.el = (Ext.util.Format.lowercase(container.flexElement) == 'body') ? Ext.getBody() : Ext.get(container.flexElement);
        if(Ext.isEmpty(container.el)) {
            container.el = Ext.get(Ext.DomHelper.append(Ext.getBody(), {
                tag: 'div',
                style: 'position: absolute;',
                id: container.flexElement
            }));
        };
        // Apply configuration to container
        container.el.setHeight = Ext.emptyFn;
        container.el.setWidth = Ext.emptyFn;
        container.el.setSize = Ext.emptyFn;
        // Our flexible container is always positioned absolute and by default renders to the viewport if no other positions are set
        container.el.setStyle({
            overflow: 'hidden',
            margin: 0,
            padding: 0,
            border: '0 none',
            position: 'absolute',
            top: container.el.getStyle('top') == 'auto' ? 0 : parseInt(container.el.getStyle('top')) || 0,
            bottom: container.el.getStyle('bottom') == 'auto' ? 0 : parseInt(container.el.getStyle('bottom')) || 0,
            left: container.el.getStyle('left') == 'auto' ? 0 : parseInt(container.el.getStyle('left')) || 0,
            right: container.el.getStyle('right') == 'auto' ? 0 : parseInt(container.el.getStyle('right')) || 0
        });
        // Added from ExtJS 4.1 Viewport
        if(container.autoScroll) {
            delete container.autoScroll;
            container.el.setStyle('overflow', 'auto');
        }
        container.el.dom.scroll = 'no';
        container.allowDomMove = false;
        container.renderTo = container.el;
        // Set the intial size (After we render so size is not stamped into DOM)!
        container.on('afterrender', function() {
            var x = (parseInt(container.el.getStyle('left')) || 0) + (parseInt(container.el.getStyle('right')) || 0),
                y = (parseInt(container.el.getStyle('top')) || 0) + (parseInt(container.el.getStyle('bottom')) || 0);
            this.height = Ext.Element.getViewportHeight()-y;
            this.width = Ext.Element.getViewportWidth()-x;
        }, container);
        // ExtJS 4.1 stamps the height & width into the DOM so we need to unset it
        container.on('resize', function(cmp) {
            if(Ext.getVersion('core').isGreaterThan('4.0.7')) {
                cmp.el.dom.style.height = null;
                cmp.el.dom.style.width = null;
            }
        });
        // Tell the container to update its size when the windows was resized
        var me = this;
        setTimeout(function() {
            Ext.EventManager.onWindowResize(me.adjustSize, me);
        }, 1);
    },
    adjustSize: function(width, height) {
        // Only resize if width & height differ from current values to avoid useless layouts
        if(width != this.width || height != this.height) {
            var cmp = this.getCmp(),
                el = cmp.el;
            cmp.setSize(el.getPageBox());
        }
    }
}); 

Containers are created like this:

Ext.widget('panel', {
    flexElement: 'myflexdiv',
    plugins: 'flexcontainer',
}); 

For "myflexdiv" I add a CSS style like this:

#myflexdiv {
    background-color: white;
    position: absolute;
    top: 100px;
    left: 20px;
    right: 20px;
    bottom: 50px;
}