View Full Version : viewport-tbar & bbar height problem

21 Jul 2009, 4:02 AM
I am trying to create a layout with a "tbar"(toolbar) and "bbar" in the north region of a border layout. the problem is if i do not give "height: 50" inside items, the tbar and bbar overlap in Firefox and in IE7 a small gap appears in between the tbar and bbar. in case if i mention the "height: 50" inside items, then i will get the alignment perfectly in firefox but it widens in IE7. can anyone figure out the flaw in the code. i am using the latest version of Ext-js (3).

any help will be highly appreciated...

new Ext.Viewport({
renderTo: document.body,
layout: "border",
items: [{
region: "north",
split: false,
border: false,
height: 50,
text: 't-1'
}, {
text: 't-2'
bbar: [{
text: 'b-1'
}, {
text: 'b-2'
}, {
region: "center",
title: "center",
layout: "fit"

21 Jul 2009, 4:32 AM
In IE6/7 the body can't be empty.

Wouldn't it be easier to use the new Ext.ButtonGroup panel in Ext 3.0?

21 Jul 2009, 5:05 AM
Thanks so much for your reply, I need to have both the toolbar and menu bar in the north panel and my application will have center,west and south panel so i can't move away from using the viewport .any other suggestion ?


21 Jul 2009, 5:10 AM
No, I meant using an Ext.ButtonGroup as the north region.

21 Jul 2009, 5:35 AM
i got that working without using Ext.ButtonGroup, just by adding a html property in the items as " html : '<p\>' "

thanks again for the reply,