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

后端未结

关注

 4  1720

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.

相关标签:

4条回答

伪装坚强ぢ

2021-01-31 22:07

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?

0 讨论(0)
发布评论:

提交评论
- 加载中...
难免孤独

2021-01-31 22:08
I don't have enough reputation to "comment anywhere" yet, but I do have a fix to the "not working when window is resized smaller" problem described by HOCA. I was having the same problem too, using the solution outlined by this answer. After Googling around for a while, I found this thread on the sencha.com website. Using a similar technique to the one described there seems to work better cross-browser (using the exact solution offered there seems to work somewhat differently between FF/IE).
```
Ext.EventManager.onWindowResize(function() {
    // pass "true" to get the contendWidth (excluding border/padding/etc.)
    mainPanel.setWidth(Ext.getBody().getWidth(true));
    // seems to be no need to call mainPanel.doLayout() here in my situation
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

自闭症患者

2021-01-31 22:20

I solved it by setting the layout: 'fit' to the panel that contains the grid

var myGridTab = new Ext.Panel({
    layout: 'border',
    region: 'center',
    autoScroll: true,
    animCollapse: false,
    forceFit: true,
    title: ' My Grid Tab ',
    split: true,
    border: false,
    items: [
    {
        region: 'center',
        **layout: 'fit',**
        autoScroll: true,
        items: [myGrid],
        height: 150,
        forceFit: true
    }]
});

0 讨论(0)

不知归路

2021-01-31 22:32

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 讨论(0)