View Full Version : Adding grid to a tab

13 Jan 2010, 1:46 PM
I have a windows with a tab panel. One of his tab item contains the result of a query as a grid. When the application receive the result from the server, it render the grid and add it to the tab item (called resultTab).

The problem is that when the tab is already rendered, the grid do not appears.

Here is the code I run when I receive the result :

private Grid<ResultRow> grid;

private void refreshResultGrid(QueryResult queryResult)
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
for (ResultColumn column : queryResult.getColumns())
ColumnConfig columnConfig = new ColumnConfig();
ColumnModel cm = new ColumnModel(configs);

ListStore store = new ListStore();

grid = new Grid<ResultRow>(store, cm);
resultTab.add(grid, new BorderLayoutData(LayoutRegion.CENTER));

The first line remove the grid and the last one add the new one. The old grid is removed but the new one does not appears... How can I force it to be rendered correctly?

By the way, if this method is executed before the tab is selected, the grid is rendered correctly the moment the tab is selected.


14 Jan 2010, 3:34 AM
I realize this doesn't exactly answer your question but I'd advise not putting grids into tabs if you can avoid it. I spent close to a week trying to make my grid work when I moved it into a tab and finally gave up. The graphics of the content panel all seemed to mess up among other problems. Have you considered moving it into a popup? I found that much easier.

14 Jan 2010, 6:17 AM
Thanks for the answer. There is a thing I did who half works. I replaced the last line :

resultTab.add(grid, new BorderLayoutData(LayoutRegion.CENTER));

with :


The grid was successfully added, but rendered as a flowlayout. By resizing the window just a little bit the correct rendering was called and the grid ajusted to the size of the panel.

Do you thing I should open a bug?


14 Jan 2010, 11:08 AM
Well I might try a few things first like double checking the CSS and asking people who understand extGWT better than me first. Like I said I never really got my grid working in a tab.

14 Jan 2010, 11:58 AM
Ok thanks, for me it's working as long as the grid is added before the tab is rendered. So the workaround I'm using is deleting the tabitem and craete a new one with the new grid each time it changes.


14 Jan 2010, 4:39 PM
Did you tried "forceLayout()" ?

15 Jan 2010, 8:24 AM
did you try Grid#reconfigure ?

with this there is no need to remove the grid and add it again...


public void reconfigure(ListStore (http://www.extjs.com/forum/../deploy/gxtdocs/com/extjs/gxt/ui/client/store/ListStore.html)<M (http://www.extjs.com/forum/../deploy/gxtdocs/com/extjs/gxt/ui/client/widget/grid/Grid.html)> store,ColumnModel (http://www.extjs.com/forum/../deploy/gxtdocs/com/extjs/gxt/ui/client/widget/grid/ColumnModel.html) cm)
Reconfigures the grid to use a different Store and Column Model. The View will be bound to the new objects and refreshed.
store - the new store
cm - the new column model PS:
and just for information: if you change the elements on the screen you have to do a layout() call

thats a hidden botleneck and you can not found this in the examples :-(

see here. http://www.extjs.com/forum/showthread.php?t=87805

15 Jan 2010, 8:35 AM
In my answer I said to use forceLayout(), but the correct is "parent.layout(true)", where parent is you Tab

I think that you just need to force the layout, as the component has been added after render.

Don't we use reconfigure when we need to change the Store and Column Models? Sorry if I'm wrong.