View Full Version : BorderLayout, north region toolbar (upgrade question)

29 Aug 2009, 6:33 AM
Upgrading from 2 to 3.0.0 and have come across the following upgrade issue with toolbars in the North region of a border layout.

In Firefox 3.5 the north region toolbar does not get laid out correctly when the Viewport and its contents are first rendered. Works ok in Ext2.2.

Anyone know why this happens? Is the height of the toolbar now included in the height of the north region?

Sample code attached. Should work ok if you drop it in the examples directory.

Thanks in advanve for any ideas.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title>toolbar test</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<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">

var page = {};

page.init = function()
this.viewport = new Ext.Viewport({
id: "page-viewport",
layout: "border",
items: [
title: "North title",
region: "north", id: "t-north-region",
border: false,
tbar: new Ext.Toolbar({
//height: 23, //Adding a height is one way to get it to work.
items: ["North Toolbar"]
layout: "fit",
height: 0
title: "Center title",
region: "center", id: "t-center-region",
border: false,
tbar: new Ext.Toolbar({
items: ["Center Toolbar"]
layout: "fit",
items: new Ext.Panel({
border: false,
html: "Content of <strong>center</strong> panel"

Ext.onReady(page.init, page, true);
<body id="page-viewport">


29 Aug 2009, 6:37 AM
Your north region shouldn't be height:0 but autoHeight:true.

29 Aug 2009, 7:03 AM
Condor, thanks for the suggestion.

I've tried autoHeight: true in both the North region and the north toolbar but it doesn't make any difference for me in Firefox 3.5. Am I putting the fix in the correct place?

I'm not convinced that a North region can be autoHeight anyway, I thought it always had to have a fixed height? In my case I don't want a body panel so the height of that should be zero. I don't know if the new layout capabilities of the toolbar mean that the layout is going wrong with Ext 3.0.0 for Firefox 3.5. IE 7 seems to do it correctly for a change.


29 Aug 2009, 7:18 AM
Your example worked for me with autoHeight:true, but I agree that there are cases in which this will not work.

You have several options:
- Give the north region a fixed height.
- In the afterlayout event of the toolbar adjust the size of the north region.
- Make the viewport layout:'fit', put a single panel with layout:'border' inside with the north title and the toolbar and put the other regions inside.

29 Aug 2009, 8:42 AM
Thanks, I'll have to mull over the various options.

Stefan B
1 Oct 2009, 5:35 AM
While migrating our app from Ext 2.2.1 to Ext 3.0.2 I ran into the same problem.
None of the suggested solutions fixed the issue for me. The only thing that really worked out was setting fixed heights for both the north panel and the toolbar (27px, the default if it contains buttons).