1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    2
    Vote Rating
    0
    emk is on a distinguished road

      0  

    Default Getting "Border Layout" panel inside a div, not the whole viewport (Newbie Question)

    Getting "Border Layout" panel inside a div, not the whole viewport (Newbie Question)


    Hi, I'm trying to get a Panel with layout:border, to appear properly in a div. I define a new panel and do render() to the div, but this is not working. Javascript below:

    Code:
    /* border_layout.js */
    
    Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif";
    
    Ext.onReady(function () {
    
        var p = new Ext.Panel({
    
            id: 'border-panel',
            title: 'Border Layout',
            layout: 'border',
            bodyBorder: false,
            defaults: {
                collapsible: true,
                split: true,
                animFloat: false,
                autoHide: false,
                useSplitTips: true,
                bodyStyle: 'padding:15px'
            },
            items: [{
                title: 'Footer',
                region: 'south',
                height: 150,
                minSize: 75,
                maxSize: 250,
                cmargins: '5 0 0 0',
                html: '<p>Footer content</p>'
            },
            {
                title: 'Navigation',
                region: 'west',
                floatable: false,
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: 175,
                minSize: 100,
                maxSize: 250,
                html: '<p>Secondary content like navigation links could go here</p>'
            },
            {
                title: 'Main Content',
                collapsible: false,
                region: 'center',
                margins: '5 0 0 0',
                html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
            }]
    
        });
    
        p.render("container");
    
    });
    
    /* EOF:border_layout.js */
    And the HTML here:

    Code:
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id="title">border_layout</title>
        <link href="../resources/css/ext-all.css" rel="Stylesheet" type="text/stylesheet" />
    
        <script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="../ext-all-debug.js" type="text/javascript"></script>
        <script src="border_layout.js" type="text/javascript"></script>
    
        <style type="text/css">
            body{text-align:center;margin:0;padding:0;background-color:#666666;}
            #container{width:90%;min-width:400px;text-align:left;margin-left:auto;margin-right:auto;margin-top:100px;margin-bottom:0px;background-color:#fff;color:#484848;font-family:Georgia;font-size:14px;padding:16px;}
        </style>
    
    </head>
    
    <body>
    
        <div id="container">
        </div>
    
    </body>
    </html>

    The problem is that when I render this in the browser is see only the ExtJS element with the title bar "Border Layout" and nothing more (basically I only see the title bar).

    I am using the example code from this page: http://dev.sencha.com/deploy/dev/exa...t-browser.html

    Any guidance, or even a pointer to the right documentation would be _much_ appreciated.

    - emk

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You'll need the FitToParent plugin (see User Extensions forum).

    ps. But your 'container' will need a height!

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use a Viewport if you want to occupy the whole browser Window.

  4. #4
    Ext User
    Join Date
    Oct 2010
    Posts
    2
    Vote Rating
    0
    emk is on a distinguished road

      0  

    Default


    Thanks Condor, that is exactly what I need!
    But is it possible to make the Panel have a minimum height and then the content within the Panel "expand" it to determine its ultimate height?

    - emk

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    BorderLayout uses absolute positioning, so this will not happen automatically.

    You will have to calculate the required height and set it in the container.

  6. #6
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    183
    Vote Rating
    52
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    I wrote a blog post explaining about FitParent Plugin:
    http://loianegroner.com/2010/08/how-...-ext-viewport/

    I had this same issue.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

Similar Threads

  1. Replies: 0
    Last Post: 9 Sep 2009, 1:14 AM
  2. Why might a "layout: border" panel not show up?
    By Mike Robinson in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 8 Sep 2009, 12:31 PM
  3. [CLOSED] Extends Ext.Panel / Layout: border / "calling" problems
    By Schenck in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 17 Jun 2009, 2:47 AM
  4. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM
  5. "west region" and "center region" in border layout problem!!
    By carzheng in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 25 Feb 2008, 12:20 AM

Thread Participants: 3

Tags for this Thread