title: Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?
body: <p>I want to include an ExtJS <code>GridPanel</code> inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.</p>
  
  <p>From my experiments, it appears that the <code>GridPanel</code> only resizes itself correctly if it's within a <code>Viewport</code>. For instance, with this code the <code>GridPanel</code> automatically resizes:</p>
  
  <pre><code>new Ext.Viewport(
      {
          layout: 'anchor',
          items: [
              {
                  xtype: 'panel',
                  title: 'foo',
                  layout: 'fit', items: [
                      {
                          xtype: 'grid',
                          // define the grid here...
  </code></pre>
  
  <p>but if I replace the first three lines with the lines below, it doesn't:</p>
  
  <pre><code>new Ext.Panel(
      {
          layout: 'anchor',
          renderTo: 'RenderUntoThisDiv',
  </code></pre>
  
  <p>The trouble is, <code>Viewport</code> always renders directly to the body of the HTML document, and I need to render within a particular div.  </p>
  
  <p>If there is a way to get the <code>GridPanel</code> to resize itself correctly, despite not being contained in a <code>ViewPort</code>, that would be ideal.  If not, if I could get the <code>Viewport</code> 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.</p>
  
  <p>Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?</p>