ManageOverflow for BorderLayout

**xmaillot** · 27 Feb 2013 9:15 AM

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>

**mitchellsimoens** · 1 Mar 2013 8:00 AM

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.

**xmaillot** · 1 Mar 2013 9:14 AM

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.

ManageOverflow for BorderLayout

Thread Tools

Search Thread

Display

Unanswered: ManageOverflow for BorderLayout

Unanswered: ManageOverflow for BorderLayout

Tags for this Thread