PDA

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



emk
12 Oct 2010, 5:37 AM
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:




/* 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:




<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/examples/layout-browser/layout-browser.html

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

- emk

Condor
12 Oct 2010, 5:55 AM
You'll need the FitToParent plugin (see User Extensions forum).

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

Animal
12 Oct 2010, 5:56 AM
Use a Viewport if you want to occupy the whole browser Window.

emk
12 Oct 2010, 6:06 AM
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

Condor
12 Oct 2010, 6:07 AM
BorderLayout uses absolute positioning, so this will not happen automatically.

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

loiane
12 Oct 2010, 10:01 AM
I wrote a blog post explaining about FitParent Plugin:
http://loianegroner.com/2010/08/how-to-resize-an-extjs-panel-grid-component-on-window-resize-without-using-ext-viewport/

I had this same issue.