View Full Version : Bbar position within a panel within a tabpanel

13 Aug 2009, 7:11 AM

I have a bbar toolbar within a panel. The panel itself is contained within a tabpanel and this is contained within the center region of a viewport. The problem I'm having is that the toolbar is rendered just off the bottom of the browser. If I resize the browser and force a resize the toolbar comes into view. What I want to happen is for the panel with the toolbar to fill the whole containing tabpanel.

Here are the relevant bits. My panel with the bbar is defined in this way:

function getFormPanel(config) {
return new Ext.Panel(Ext.apply({

closable: true,
title: 'New quotation',
collapsible: true,
layout: 'card',
border : false,
defaultType: 'field',
items : [
bbar : [{
text : 'Back',
handler : handleNav,
icon: 'images/icons/back.png'
text : 'Forward',
handler : handleNav,
icon: 'images/icons/forward.png',
iconAlign: 'right'
xtype : 'box',
id : 'indicator',
style : 'margin-right: 5px',
autoEl : {
tag : 'div',
html : '1 of 4' +

]}));My tabPanel is defined like this:

var tabs = new Ext.TabPanel({
deferredRender: false,
minTabWidth: 115,
plugins: new Ext.ux.TabCloseMenu()
and the center part of my viewport like this:

xtype: 'panel',
layout: 'fit',
region: 'center',
tbar: [
items: [tabs]
I'm adding tabs like this:

function addTab(){
Any help would be appreciated.

Best DF

24 Aug 2009, 5:58 AM
question: why wrap a panel around the tab panel? Why not just give it a tbar and place it in the center region?

24 Aug 2009, 5:58 AM
be sure to call doLayout after the add call.