ansaurus

Question

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

Answer 1

+4 A:

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.

Jonathan Julian 2010-03-02 21:49:31

Thank you! One thing I'll note, in case anyone reading this runs into the same thing: in my actual application, I did need the "redundant" container around the grid to make it work. The panel that renders to the div (analogous to the "foo" panel in my example) had more than one item in it, but the grid still didn't resize unless it was in a `fit` layout, which can only have one item in it.

Micah 2010-03-02 22:49:13

Answer 2

A:

Thank you for your solution but this seems to work only in FF. Am i wrong?

Jonas 2010-03-08 17:36:58

Jonathan's solution works for me in Firefox 3.0 and IE 7. I haven't tested it with anything other than those two yet. (In the environment where I'm working, it's tough to get access to any browser other than those officially blessed by the powers that be.)

Micah 2010-03-08 18:54:18

Answer 3

A:

In IE6 and Chrome your solution doesn't seem to work when the browser window is resized/made smaller that the original size. It does, however, resize properly when the browser window is resized larger. Does the Ext.EventManager.onWindowResize(panel.doLayout, panel) not fire when the browser window is made smaller?

HOCA 2010-03-31 01:22:29

ansaurus

tags:

views:

answers:

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

related questions