First so I don't look too dumb :-)

With the excellent examples as a guide, I know how to build a viewport with a border layout and a tab panel in the center with tabs that in turn contain grids. This all looks and works well, and in particular, resizing the browser window causes ALL components to resize, and the grid in the panel of the selected tab in the center resizes absolutely perfectly!

I built this entire html page with javascript and ext components, i.e. no <div></div> elements to contain tab panel contents.

The problem is my tab panel panel content needs to come from <div></div> inside the html page - the content inside of these div sections comes from JSP tag libraries, e.g....

<div id="panel1">.... dynamically built content from jsp page ...</div>
<div id="panel2">.... dynamically built content from jsp page ...</div>

This works just fine with plain html inside the div area. However, in one case I need to embed an extjs grid, so the div content sort of looks like this...

<div id="panel2">
<div id="grid-goes-here"></div>
<script>
//generate the actual grid with various options and data set
//THE GRID USES THE renderTo: 'grid-goes-here' config property to generate it in the correct location
</script>
</div>

Now this works just fine, and the grid renders to the correct spot inside the correct tab panel.

The problem is that resizing the browser window NO LONGER resizes the grid inside the tab panel generated using this technique!

I read around some documentation and it said that you shouldn't use the renderTo config property or render() method when you want your grid's layout to be controlled by its parent container - which is exactly my scenario!

So how can I dynamically generate a grid into a div which forms the content of a tab panel in such a way that the parent container correctly controls the grid's layout and it resizes properly when the browser window is resized?

Many thanks in advance!