Home/ Questions/Q 636761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:33:01+00:00

I want to include an ExtJS GridPanel inside a larger layout, which in turn

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    <html>
  <head>
    <link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
    <script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
    <script src="ext-3.1.1/ext-all-debug.js"></script>
    <script>
      Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
      Ext.onReady(function(){
        var panel = new Ext.Panel({
          renderTo: 'areaDiv',
          layout: 'fit',
          items: [{
            height: 200,
            title: 'foo',
            xtype: 'grid',
            cm: new Ext.grid.ColumnModel([
              {header: "id", width: 400},
              {header: "name", width: 400}
            ]),
            store: new Ext.data.ArrayStore({
              fields: ['id','name'],
              data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
            })
          }]
        });
        //pass along browser window resize events to the panel
        Ext.EventManager.onWindowResize(panel.doLayout, panel);
      });
    </script>
  </head>
  <body>
    header
    <div id="areaDiv" style="padding:30px;"></div>
    footer
  </body>
</html>

    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.

    • 0