View Full Version : ExtJS 3.1 grid not rendering if tab not active

29 Dec 2009, 3:59 AM
Hi guys,

I just updated from EXTJS 3.0 to EXTJS 3.1 and got some problems.
First the bottom tabs were not showing correctly - I fixed it like described in this thread:
And now the second problem: I got a TabPanel with 2 tabs. On the first tab there is a form and a grid - on the second there are 3 divs and in each one gets a grid. I am using WebServices and when the data is loaded the 4 grids are beeing displayed. That worked fine in 3.0 but now in 3.1 when I show the TabPanel the data for the grid is loading but when I switch to the second tab, not all grids are displayed and I get following error:

TypeError: Undefined value

at app:/lib/ext/ext-all-debug.js : 42983

at app:/lib/ext/ext-all-debug.js : 42395

h at app:/lib/ext/ext-all-debug.js : 1934

undefined at undefined : undefined

Line 42983 is following function:

isMenuDisabled : function(col){
return !!this.config[col].menuDisabled; // error

For me it seems, that the grids are only displayed, if I am on the second tab, before the grids are being rendered. So if I wait a second and the first grid is already rendered I get one error. Then, if I switch and the second grid is loaded, it is displayed and I get no error for that grid.
If I wait 5 seconds and all grids should be rendered no grid is displayed and I get 3 errors.
If I click on the second tab immediately all grids are rendered!

Does anyone got the same problem? Does anyone know what the problem could be?

Thank you!

29 Dec 2009, 7:07 AM

Just a try.

29 Dec 2009, 11:06 AM

the grids are all rendered now, but errors are still shown oO Also the PagingToolbar is not displayed anymore mit forceLayout!

bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 'Nachrichten {0} - {1} von {2}',
emptyMsg: "Keine Nachrichten vorhanden!",
listeners: {
afterrender: function(comp){comp.refresh.hide();}

In Ext 3.0 it worked fine :(

P.S. In Aptana 2.0.2 it shows a more detailed error:
"Result of expression 'this.config[col]' [undefined] is not an object." in line 42983 of ext-all-debug.js

29 Dec 2009, 12:15 PM
Hi again,
I just debugged a little bit and found out, that the function where the error happens (line 42983) is called, when the mouse gets over a header of a column. The code is:

isMenuDisabled : function(col){
return !!this.config[col].menuDisabled;
When I call alert(col); I get the numbers of the column - BUT: in the first one I get "false" instead of 0! When I check for false and then set it to 0 manually, the errors doesn't appear anymore, but the grids aren't displayed anyway :(

30 Dec 2009, 2:21 AM
Okay - after searching a while for the problem, I am getting closer to the problems.
Well, I found this in the changelog:

Ext.grid.Column, Ext.grid.ColumnModel
Change to the 2.x behavior where column's that do not specify an id will use the ordinal position of the column to generate the id, instead of autogenerating unique id's for every column
I didn't had given any id in the ColumnModels of the grids - now after giving each column an id, the error doesn't appear anymore and I am able to sort the first column :)

this.aktenColModel = new Ext.grid.ColumnModel([
{header: "Head was not dortable and threw an error", width: 300, sortable: true, dataIndex: 'name', id: 'name'},
{header: "Head2", width: 70, sortable: true, dataIndex: 'az', id: 'az'},
{header: "HeadX", width: 100, sortable: true, dataIndex: 'amount', id: 'amount', renderer: getText}
That's strange, because in the API there is no code with any id given :-?

Anyway, on the second tab I create a new Panel with forceLayout:true . Now the grids are rendering (otherwise the div-tags on that tab were not found!), BUT the PagingToolbar is not displayed :(

Does anyone know how I can force to display the PagingToolbar in the bbar of the grid?

30 Dec 2009, 1:20 PM
Still searching for the problem I thought, that I could "fix" this problem, when I render the 3 grids, when I click on the second tab. But how can I easily access these 3 grids from the listener of the tab? First I create the tab and then the 3 grids - any ideas how I can assign the render functions of the grids to the tab listener?

Hope there's a workaround for that problem coming :-/

2 Jan 2010, 6:07 AM
Okay - I asked: "Does anyone know how I can force to display the PagingToolbar in the bbar of the grid?" Well, I used the Adobe Air Introspector to search for the problem and found out, that the bbar is rendered, but with a width of 0px! Then I set autoWidth:true to the toolbar, but there is a DIV-container around the div-container, which is set to width:auto;


The highlighted DIV-container got a fix width, which is not updated. So when it is rendered it got a width of 0px and when I click on the second tab it's still 0px. When I click on the second tab, before the grid is rendered (that is the scenario on the screenshot), the bbar is displayed, but the width does not get updated! The rest of the table is updated when resizing the window (like shown on the screenshot).

Here is the code of my grid:

var grid = new Ext.grid.GridPanel({
id: 'docgrid',
el: 'dokumentengrid',
ds: ds,
cm: colModel,
sm: selModel,
autoWidth: true,
monitorResize: true,
title: 'Dokumente',
autoHeight: true,
columnLines: true,
forceFit: true,
scrollOffset: 1
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 'Dokumente {0} - {1} von {2}',
emptyMsg: "Keine Dokumente vorhanden!",
autoWidth: true,
listeners: {
afterrender: function(comp){comp.refresh.hide();grid.getBottomToolbar().doLoad(0);}
buttons: [...]

Can anybody tell how to set the div container "x-panel-bbar" to width:auto; or better: how can I set the autoWidth for the bottomtoolbar really?


2 Jan 2010, 7:25 AM
Are you using deferredRender:false on the tabpanel?

Unfortunately, that option is broken (http://www.extjs.com/forum/showthread.php?t=88063) in the Ext 3.1.0 release.

2 Jan 2010, 11:05 AM
Yes, I do :( Otherwise it would not work to render the grids to the div-containers in the second tab. For now I created an CSS-Fix:

.x-panel-bbar {
width: auto !important;

I don't think it's the same problem like described in the link you posted. The grid is rendered when I use forceLayout:true, but only the toolbar is not displayed, because it has the width 0px! But it is rendered...

3 Jan 2010, 4:23 AM
As you are using air:

The problem on the first column is a known problem: http://www.extjs.com/forum/showthread.php?p=133523#post133523

3 Jan 2010, 4:35 AM
Yes - thanks. I already fixed it giving every col an id. Only the width of the toolbar makes problems now :-/