PDA

View Full Version : Container Not Showing Anything



darren
25 Mar 2010, 10:43 AM
Hi guys, I am trying to make a layout using a viewport, a border layout to be more precise. Anyways I have a container as my north region and I put a panel within it so I can show a nice toolbar. Anyways the toolbar isn't showing at all and I can't seem to figure out why.

Here is my code:


var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.Container({
region: 'north',
items: [
new Ext.Panel({
layout: 'border',
width: 'auto',
tbar: [{
xtype: 'tbtext',
id: 'clock'
},{
xtype: 'tbseparator'
},{
text: 'Recent Activity',
iconCls: 'recent-activity'
},{
xtype: 'tbfill'
},{
text: 'Profile',
iconCls: 'profile'
},{
xtype: 'tbseparator'
},{
text: 'Logout',
iconCls: 'logout'
}]
})
]
})
]
});


Am I missing something? Can someone help me out?

evant
25 Mar 2010, 10:48 AM
Do you have debugging turned on in your browser? Because you should be getting an error saying you don't have a center region.

If you've only got one item, why use a border layout, just use a fit layout.

Also, your 'Container', has no layout specified.

Also, why go to the trouble of creating a panel when you just want a toolbar?

darren
25 Mar 2010, 10:51 AM
Yes shouldn't is show without the center though?

Hmmm, I thought I read that the toolbar can only be applied to certain elements like panels and whatnot. Basically I want to have more than 1 thing in the north region though, so that is why I am using a container to contain all of those because the container needs to be the northern region. I will continue to try to decipher the ExtJS logic.

mpawlowski
25 Mar 2010, 11:01 AM
Any border layout needs a center region to display correctly.

From the API (http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout):

Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

Any child items with a region of north or south must have height defined.

darren
25 Mar 2010, 11:01 AM
Thanks for that tip!

TrotskyIcepick
28 Mar 2010, 11:26 AM
Just ran your code through Firebug console with the following:

new Ext.Container({
region: 'center',

And it shows a toolbar just fine.