Results 1 to 3 of 3

Thread: ManageOverflow for BorderLayout

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default ManageOverflow for BorderLayout

    Hello !

    I would like to know if manageOverflow is working for a viewport with a border layout.
    My app have a viewport (border layout) and inside 4 containers (2 North, 1 east and 1 west). One of these containers (the one on the east) is my main container with a layout fill.
    When I "change my page", I dynamically fill this main containers with my page container.

    My problem is : when I put a grid container whitch is longer than my innerHeight (screen size), a vertical scrollbar appear, which is good, but also an horizontal scrollbar. The viewport doesn't auto relayout with the new size (the size without the scrollbar).

    The manageOverflow seems to be the answer but when I add this properties to my layout, it's the same result as the property reserveScrollbar.

    Anyone had already tried this ?

    Edit : An exemple for tests

    <!DOCTYPE html>

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>test</title>



    <script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js" type="text/javascript"></script>
    <script>
    Ext.application({

    name: 'test',
    launch: function() {


    Ext.create('Ext.container.Viewport', {
    layout: {
    type: 'border',
    manageOverflow: 1
    },

    autoScroll:true,

    items : [{
    xtype: 'container',
    region: 'north',
    height: 150,
    border: 5,
    style: {
    borderColor: 'black',
    borderStyle: 'solid'
    }
    }, {
    xtype: 'container',
    region: 'west',
    width: 150,
    border: 5,
    style: {
    borderColor: 'green',
    borderStyle: 'solid'
    }
    }, {
    xtype: 'container',
    region: 'north',
    height: 150,
    border: 5,
    style: {
    borderColor: 'red',
    borderStyle: 'solid'
    }
    }, {
    xtype : 'container',
    region : 'center',
    border: 5,
    style: {
    borderColor: 'blue',
    borderStyle: 'solid'
    }
    }],
    renderTo: Ext.getBody()
    });
    }
    });
    </script>
    </head>


    <body></body>


    </html>
    Last edited by xmaillot; 28 Feb 2013 at 1:48 AM. Reason: Add code exemple

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You're example isn't showing anything with east or child items or anything. It sounds like a layout or sizing issue that you have meaning something you are doing isn't setup properly.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Sorry, my example was really bad. I try to make a simple one (but not as simple as I would...)

    First of all, this is my HTML code with extjs (js and css) and app.js imports :
    Code:
    <!DOCTYPE html>
    
    <html>
        
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" href="./style.css">
    
    
            <title>test</title>
            
    
    
            <script src="./ext-all-debug.js"></script>
            <script type="text/javascript" src="app.js"></script>
    
    
        </head>
    
    
        <body></body>
    
    
    </html>
    Now, this is my app.js :

    Code:
    Ext.application({                
        name: 'test',
        
        launch: function() {
    
    
            Ext.create('Ext.container.Viewport', {
                
                layout: {
                    type: 'border',
                    manageOverflow: 1
                },
                
                autoScroll:true,
    
    
                items : [{
                    xtype: 'container',
                    region: 'north',
                    height: 69,
                    border: 5,
                    style: {
                        borderColor: 'black',
                        borderStyle: 'solid'
                    }
                }, {
                    xtype: 'container',
                    region: 'north',
                    height: 42,
                    border: 5,
                    style: {
                        borderColor: 'red',
                        borderStyle: 'solid'
                    }                
                }, {
                    xtype: 'container',
                    region: 'west',
                    width: 150,
                    border: 5,
                    style: {
                        borderColor: 'green',
                        borderStyle: 'solid'
                    },
                }, {
                    xtype : 'container',
                    region : 'center',
                    border: 5,
                    style: {
                        borderColor: 'blue',
                        borderStyle: 'solid'
                    }                        
                }],
                renderTo: Ext.getBody()
            });
        }
    });
    My problem is with a big grid panel but I found a solution to simulate it.
    If, in chrome developper console, you change the height of the center container (big enought for vertical scrollbar appear, around 2000 should be enought).
    You will see the vertical scrollbar appear but you'll see also the horizontal scrollbar because the viewport doesn't resize and the right part of the application is now under the vertical scrollbar.
    So, the browser show also the horizontal scrollbar in order to access to the right part.

    Maybe it's normal with my trick that the viewport doesn't resize, but in my case, when I load a panel with a big height, I always have both scrollbars.
    So I search how to autoresize viewport when a panel is too big and I found the option manageoverflow, which seems to do this.

    Again, thank you for your answer.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •