View Full Version : Adding a grid to a tabpanel takes up full page !!

2 Jul 2010, 10:17 AM
I am using a complex.html example that comes with the extjs download.

so for the following example

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
}), {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'Dring Dring Dring',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
items: [simple]
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [ {
contentEl: 'center2',
title: 'Result',
autoScroll: true

when I uncomment the xtype:'grid', it takes up the whole page and the west and north regions are gone. HELP !!

2 Jul 2010, 10:32 PM
These are the thing I can see so far.

1. west-panel is missing an xtype
2. gridpanel is missing a column model
3. contentEl: 'center2' is not needed i guess.

I hope this helps

2 Jul 2010, 10:55 PM
Some extra notes:
1. If you don't specify an xtype, the defaultType of the container is used (which is 'panel' in this case).
2. An xtype:'grid' not only needs columns, it also needs a store.
3. An xtype:'grid' doesn't support a contentEl, so remove it.

28 Jul 2010, 10:09 PM
Just to add:

West and North regions are gone because center region is the MUST in a Border Layout.