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

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>'




/* EOF:border_layout.js */

And the HTML here:


<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">



<div id="container">


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

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

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

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

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

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.

12 Oct 2010, 10:01 AM
I wrote a blog post explaining about FitParent Plugin:

I had this same issue.