View Full Version : [SOLVED] Grid in Tab doesn't reload correctly

4 May 2010, 5:29 AM

I have a TabPanel with four tabs. Two of the tabs contain a GridPanel (and other Elements), two contain a TreePanel (and other Elements).
There is a situation when I want to reload the data for some of these four components.

For the trees I use

tree.getLoader().load(tree.root)For the grid I use

grid.getStore().reload()The code for the trees works fine.

The problem I actually have is that the grids are empty if I reloaded them when they were not visible (which happens quite often because they are in tabs after all). The stores behind the grids reloaded their data, the grids just look empty. When I resize my browser window and the grids are layouted, they are filled with rows again. I tried to figure out what method I could call to redraw the grid on my own, but I had no success.

Can anyone help me please? Thanks in advance.

Greetings - Andy

4 May 2010, 7:09 AM
Grid "in" a tab? I'm guessing that's your problem.

Grid as a tab is how it works.

4 May 2010, 11:43 PM

thanks for your reply, and sorry for the unclear description. The grids are the tabs, indeed. (The description above is not correct anymore as I removed the other components that were in the tabs, along with the grids/trees.)

Here is a snippet from the TabPanel configuration:

plain: true,
margins: '2 0 0 0',
activeTab: 0,
items: [
new Ext.grid.GridPanel({
title: 'Eingang',
id: 'tabFilterInbox',
store: Ext.StoreMgr.get('Inbox'),
// ...
new GKCM.Components.MaskTreePanel({
title: 'Datum',
id: 'tabFilterDate',
// ...
new Ext.grid.GridPanel({
title: 'Partner',
id: 'tabFilterContacts',
store: Ext.StoreMgr.get('ContactList'),
// ...
new GKCM.Components.MaskTreePanel({
title: 'Tags',
id: 'tabFilterTags',
// ...
}MaskTreePanel is a class the extends the original TreePanel to provide a load mask (see here (http://www.extjs.com/forum/showthread.php?43645-Add-loadmask-to-treepanel-when-loading)).

I'm reloading the grids using Ext.StoreMgr.get(storeName).reload() or grid.getStore().reload(). As I already said above, the stores are reloaded correctly, and the grids seem to notice that the stores reloaded, but the new data is not displayed until I resize my browser window.

5 May 2010, 1:06 AM
The problem is probably further up the Container hierarchy.

At some point, there's a missing layout config.

TabPanels (for now) monitor window size, and lay themselves on on window resize. This will stop because it's not necessary. An unbroken chain of size managing layouts is required.

5 May 2010, 1:35 AM
I'm not really into layout optimizations. Maybe you have some hints for me to improve it. :)

My container hierarchy is as follows:

Viewport (layout: border)
TabPanel (region: center, no explicit layout), rendered to an existing div
Container as Tab (layout: border)
Panel (region: west, layout: border) [I could use a Container with vbox here at second glance]
TabPanel (region: center, no explicit layout) [this is the TabPanel I mentioned in my first post]
GridPanels and TreePanels as Tabs

For better imagination, this is what it looks like:

A big TabPanel (2) that nearly fits the screen (1), the first tab (3) contains a navigation bar (4) on the left side, which contains a quicksearch on the top and a TabPanel (5) in the center region. And this TabPanel contains the trees and grids (6).

I'm not sure, but: Can it really be a layout config issue? The grids are updated correctly if the corresponding tab is active.

Thanks in advance - Andy

P.S.: I'm using ExtJS version 3.2.0

5 May 2010, 1:46 AM
Try configuring all your cards with hideMode: 'offsets'

5 May 2010, 2:08 AM
Woohoo, you did it!

Thank you very much.