Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?

Question

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.

Answer 1

To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.

Ext.EventManager.onWindowResize(panel.doLayout, panel);

In your example, store the Panel into var panel, and then set up the event handler after the var declaration but still inside of Ext.onReady.

Here is a full single page solution:

  
    
    
    
    
  
  
    header
    

    footer
  

Note that I've removed the redundant panel (a GridPanel is a Panel, so no need to wrap it), and used layout fit instead of anchor. Layout fit is actually the key to a fluid layout. Make the browser smaller, then bigger. You'll see the grid always fills the entire width, with the exception of the padding.