Results 1 to 5 of 5

Thread: border layout does not resize automatically

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    New Hampshire/New England - USA
    Posts
    42

    Default border layout does not resize automatically

    I have reduced the problem to the following 'simple' example.

    Why doesn't the border panel (myMainPanel) resize itself to its container (containerPanel) when the browser window is resized?

    Thanks in advance. Thierry.

    PHP Code:
    <html>
    <
    head>
        <
    script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-all-debug.js"></script>
        <script type="text/javascript" src="BorderLayout.js"></script>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="ExtStart.css">

         <script type="text/javascript">
            var myApp;
            Ext.onReady ( function()
            {
                myApp = new MyApp ( Ext.get ( "appContentId" ) );
            });
        </script>
    </head>
    <body>
    <h1>Testing Border Layout</h1>
    <div id="appContentId"></div>
    </body>
    </html> 
    PHP Code:
    MyApp = function ( appElement )
    {
        var 
    myMainPanel;
        
    init ();

        function 
    init ()
        {
            var 
    westPanel = new Ext.Panel (
                { 
    layout'fit'
                
    region'west'
                
    width100
                
    html'This is west'
                
    });

            var 
    centerPanel = new Ext.Panel (
                { 
    layout'fit'
                
    region'center'
                
    html'This is center'
                
    });

            var 
    southPanel = new Ext.Panel (
                { 
    layout'fit'
                
    region'south'
                
    height100
                
    html'This is south'
                
    });

            
    myMainPanel = new Ext.Panel (
                { 
    title'The App Title'
                
    layout'border'
                
    items: [ westPanelcenterPanelsouthPanel ]
                });

            var 
    containerPanel = new Ext.Panel (
                { 
    title'The container'
                
    layout'fit'
                
    width'100%'
                
    height400
                
    items: [ myMainPanel ]
                });

            
    containerPanel.render appElement );
        }

        return {}


  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    A panel doesn't listen for resize of the browser. You need to put it a layout (e.g. Viewport).

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    New Hampshire/New England - USA
    Posts
    42

    Default

    Quote Originally Posted by tryanDLS View Post
    A panel doesn't listen for resize of the browser. You need to put it a layout (e.g. Viewport).
    Hum...
    This does not match what I'm seen. In the example, the containerPanel is resized automatically but not myMainPanel. So it appears containerPanel listens for browser resize (perhaps indirectly).

    The problem seems to be that myMainPanel is not resized by containerPanel???

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    New Hampshire/New England - USA
    Posts
    42

    Default

    By the way, I just realized I posted this in the wrong forum. I'm using 2.0.

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    New Hampshire/New England - USA
    Posts
    42

    Default

    adding autoWidth helps a bit (works great with IE but not FF). In FF the panel are sized to whatever is necessary to display the html. In IE the panels are sized to the edge.

    I guess I'll investigate handling the initial sizing and resizing myself. It's a pity since one would think the framework would take of this (in a browser independent way).

Posting Permissions

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