View Full Version : adding a tab containing a grid does not size to the height of the center region

patrick de laet
17 Sep 2009, 11:07 AM
I have a viewport with a center containing 1 tab.
I add a tab with an autoLoad of an HTML containing 1 <div> and 1 <script>
Everything is loaded fine and is showing up, however, the grid is only 1 line high.
How do I make the grid's height filling up the entire center region's height?

var newTab = new Ext.Panel({
id: 'tabBrowsePresidents',
title: 'Browse Presidents',
height: '100% 100%',
autoLoad: {
url: 'browsePresidents.html',


The autoLoaded HTML ...

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Browse Presidents</title>

<div id="browsepresidents"</div>
<script type="text/javascript" src="/scripts/browsepresidents.js"></script>

The autoLoaded script ...

var PresidentGrid = new Ext.grid.GridPanel({
id: "PresidentGrid",
layout: "fit",
renderTo: "browsepresidents",
border: false,
title: "Overview presidents",
store: PresidentsDataStore,
cm: PresidentsColumnModel,
enableColLock: false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),

see attached image of the result.


Patrick De Laet

17 Sep 2009, 11:19 AM
Don't load HTML.

Create a GridPanel object.

add it to the TabPanel.

patrick de laet
17 Sep 2009, 11:23 AM
Create a GridPanel object.
add it to the TabPanel.

Yes, I know, this works, but I want to add HTML so that my customers can add text, images, ... into the HTML file, above and below my <div>

I give him access to the HTML file.

17 Sep 2009, 11:39 AM
But it's pointless.

You are just loading /scripts/browsepresidents.js

patrick de laet
17 Sep 2009, 11:54 AM
No it is not pointless.

I just want to load an HTML file, containing a Javascript.
Once loaded, the javascript is executed and I want it to render my grid into an <div>.

All this works, but the grid is only 1 line height.

The grid is inside a "center" container.

The question remains: how do I set the grid's height to the center's container's height?

18 Sep 2009, 5:40 AM
I have the same problem. When I add a tab with a grid as it's item, the grid is one line height.

Any ideas ?

18 Sep 2009, 9:47 AM
Because you are also missing the point.


There is no point in HTML.

24 Sep 2009, 4:43 AM
I have the same problem. When I add a tab with a grid as it's item, the grid is one line height.

Any ideas ?

Yes. The same "ideas" that I keep posting again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and again and.

Why WRAP the Grid?


That is IT

6 Oct 2009, 8:33 AM
Hi Animal I got your Point. but if I have multiple tabs , and wanted to add one grid to each tab. in that case how would I specify the active tab and add the grid simultaneously


wont resize on browser resizing

6 Oct 2009, 9:32 AM
Because that's over nesting.

WHy can't you see that it's just


Where's the incentive to wrap the grid? If I ever find the bit of the manual you all read which says "ensure you add the grid to a Panel, and add that wrapping Panel to the TabPanel" I'll delete it. Can you point it out?

6 Oct 2009, 10:07 AM
Hi Animal, Thank you for the quick reply. your suggestion is not solving my problem. I have to add the grid in one of the existing tabs in the Main Tab Panel
The below code add to a new Panel with out any Name to the header.

Ext.getCmp('mainTab').setActiveTab(Ext.getCmp('mainTab').add(gridContact));, it would be great if you can help me to add the grid to one of the existing tabs.

6 Oct 2009, 4:05 PM
I Solved this Problem myself

Ext.getCmp('ViewPort').findById('TabPanel').add('gridpanel'). this will sovle the resizing. where viewport is the Parent container.

You can also add at a specified location

Ext.getCmp('ViewPort').findById('TabPanel').insert(1,'gridpanel'). this will add at index 1

6 Oct 2009, 9:24 PM
Well done.

You listened to me and did EXACTLY what I said: Added the Grid to the TabPanel.

Now to help those in future, PLEASE tell me what drove you to WRAP the grid, and place the WRAPPER in the TabPanel.

If we can identify the piece of documentation that you read that encouraged you to do this, and change it, we would save maybe HALF of the traffic on this forum because that is what it is 50% of the time: overnesting.

6 Oct 2009, 11:49 PM
Hi All!

The solution presented here is not working in my case, I might be doing something else wrong. The project code is to make dynamic tabs, one tab will contain a gridpanel dynamically loading data from database. Here is the code:

//first the tab creator:

var tabs = new Ext.TabPanel({

new Ext.Panel({
layout: 'fit',
baseCls: 'x-row-editor',
cls: 'x-small-editor',
addNewTab:function(newtab, id){
var cmptab = this.getComponent(id);
cmptab = this.getComponent(id);

//code that selects what kind of tab to be added:

function selectNewTab(item, e, tabid) {

switch (tabid){
case 'tab_addnewdevelopment':
newtab = new Ext.Panel({
id: tabid,
html:'add new property'

case 'tab_developments':
newtab = tab_developments;
newtab.id = tabid;
newtab.title = item.text;

.... (code omitted, redundant)

tabs.addNewTab(newtab, newtab.id);

//finally, the gridpanel

developments.Grid = Ext.extend(Ext.grid.GridPanel, {
var config = {
store:new Ext.data.JsonStore({
totalProperty: 'totalCount',

{ header:'Name', width: 160, sortable:true, dataIndex: 'name'},
{ header:'Description', width:160, sortable:true, dataIndex:'description' }


Ext.apply(this, Ext.apply(this.initialConfig, config));
this.bbar = new Ext.PagingToolbar({
developments.Grid.superclass.initComponent.apply(this, arguments);

developments.Grid.superclass.onRender.apply(this, arguments);



Ext.reg('devs', developments.Grid);

//this is called on the topmost code i gave above. i have tried several approaches to this code to work with solutions presented here to no avail...
var tab_developments = {
items:[ { xtype:'devs', height:'100%' } ]
Problem: it's still showing one-liner height for the grid panel.

this is the code that calls the tabcreator:( a sample menu )

var mnu_propertymanagement = new Ext.menu.Menu({
style: { overflow: 'visible' },
items: [

{text: 'Add New Development', handler:selectNewTab.createDelegate(this, ['tab_addnewdevelopment'], true) },

{ text: 'List of Developments', handler:selectNewTab.createDelegate(this, ['tab_developments'], true) }


I am new to extjs and this things is rockin' kicks. I hope somebody can shed light to me though.

Thanks in advance!

7 Oct 2009, 3:54 AM
It's a principle to learn, not an incantation.

The principle (and I cannot state it any more plainly), is add the Component to the TabPanel

So, you want a grid? Create the GridPanel, add it.

7 Oct 2009, 5:58 AM
Animal is right here. Add the gridpanel directly on the Tab. if you want any specific location or index use insert method, this will add the grid panel as a new Tab at the specified index

11 Nov 2009, 6:01 PM
Hi Animal,

I need some help from you. Can we add values (Select options ) to the ExtJs Combo box in thye code, not from the Store. sometimes we might need 2 or three values where we do not want to bring them from database, and not create a complete local store for these two values. is there any way we can add the valueField and displayField like

var combo=new Ext.form.Combobox({
all the config options

combo.add('valueField2','displayField2'); etc

any help form the Furum members is highly appreciated

12 Nov 2009, 1:06 AM
Add Records to the Store.

12 Nov 2009, 6:58 AM
Thanks Animal, I was trying to avoid a Store and an Array scenario.