1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    135
    Vote Rating
    1
    DiscoBoy is on a distinguished road

      0  

    Default [4.1 RC1] Layouting/Size updating issues

    [4.1 RC1] Layouting/Size updating issues


    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?

    PHP Code:
    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 
    = (this.getTop() + this.getBottom()),
              
    = (this.getLeft() + this.getRight());
        
    this.height Ext.Element.getViewportHeight() - y;
        
    this.width Ext.Element.getViewportWidth() - x;
    }, 
    container);

    -- 
    Step 2 --
    Ext.EventManager.onWindowResize(me.adjustSizeme);

    -- 
    Step 3 --
    adjustSize: function(widthheight) {
        
    // 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());
        }


  2. #2
    Sencha User
    Join Date
    May 2009
    Posts
    135
    Vote Rating
    1
    DiscoBoy is on a distinguished road

      0  

    Default


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

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

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,348
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    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?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha User
    Join Date
    May 2009
    Posts
    135
    Vote Rating
    1
    DiscoBoy is on a distinguished road

      0  

    Default


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

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

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

  5. #5
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,348
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by DiscoBoy View Post
    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?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  6. #6
    Sencha User
    Join Date
    May 2009
    Posts
    135
    Vote Rating
    1
    DiscoBoy is on a distinguished road

      0  

    Default


    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

    PHP Code:
    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"):

    PHP Code:
    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;',
                    
    idcontainer.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',
                
    margin0,
                
    padding0,
                
    border'0 none',
                
    position'absolute',
                
    topcontainer.el.getStyle('top') == 'auto' parseInt(container.el.getStyle('top')) || 0,
                
    bottomcontainer.el.getStyle('bottom') == 'auto' parseInt(container.el.getStyle('bottom')) || 0,
                
    leftcontainer.el.getStyle('left') == 'auto' parseInt(container.el.getStyle('left')) || 0,
                
    rightcontainer.el.getStyle('right') == 'auto' 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 
    = (parseInt(container.el.getStyle('left')) || 0) + (parseInt(container.el.getStyle('right')) || 0),
                    
    = (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.adjustSizeme);
            }, 
    1);
        },
        
    adjustSize: function(widthheight) {
            
    // 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:

    PHP Code:
    Ext.widget('panel', {
        
    flexElement'myflexdiv',
        
    plugins'flexcontainer',
    }); 
    For "myflexdiv" I add a CSS style like this:
    PHP Code:
    #myflexdiv {
        
    background-colorwhite;
        
    positionabsolute;
        
    top100px;
        
    left20px;
        
    right20px;
        
    bottom50px;


Thread Participants: 1