Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
    xmaillot is on a distinguished road

      0  

    Default Unanswered: ManageOverflow for BorderLayout

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    6
    Vote Rating
    0
    xmaillot is on a distinguished road

      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.

Thread Participants: 1

Tags for this Thread