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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    181
    Vote Rating
    50
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar