Gridpanel auto resize on window resize

问题

I'm using the array-grid extjs example to try and fit a gridpanel into a container window. The problem is on resizing the container window, the gridpanel doesn't automatically fit the new size. As I understand it that's how it's supposed to work.

Here's the link to the example: http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

What I've done is changed the following..

// Added to gridpanel config
layout: 'fit',
viewConfig: {
    forceFit: true
}

// Window container
var gridWindow = new Ext.Window({
    items: [
        grid
    ]
});

// Instead of grid.render, use gridWindow.show();
gridWindow.show();

回答1:

layout: 'fit',

should go into the gridWindow configuration! The layout manager arranges the children of a panel, but the grid is the child.

回答2:

I'm using the following workaround:

Ext.onReady(function () {
    var grid = ... //define your grid here

    Ext.EventManager.onWindowResize(function () {
        grid.setSize(undefined, undefined);
    });
});

Extjs v4.0.7

回答3:

I solved this by wrapping my gridpanel into an Ext.Panel, with a layout property set to 'fit'. The grid panel (with a viewConfig also containing forceFit: 'true' now is resized automatically when the window is resized

回答4:

I think you need to use EventManager class. Please read it in following blog

回答5:

Using ExtJS 6, this is what worked for me (doesn't need a Ext.Viewport as parent container):

var grid = //...

Ext.on('resize', function(w, h){
  grid.updateLayout();
});

来源：https://stackoverflow.com/questions/2513784/gridpanel-auto-resize-on-window-resize

标签

extjs