I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.

From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes:

new Ext.Viewport(
    {
        layout: 'anchor',
        items: [
            {
                xtype: 'panel',
                title: 'foo',
                layout: 'fit', items: [
                    {
                        xtype: 'grid',
                        // define the grid here...

but if I replace the first three lines with the lines below, it doesn't:

new Ext.Panel(
    {
        layout: 'anchor',
        renderTo: 'RenderUntoThisDiv',

The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div.

If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div.

Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?