PDA

View Full Version : resizing issues with embedded grid



NateS
23 Apr 2009, 8:46 PM
I am evaluating ExtJS for use in an existing commercial webapp. The app currently has tables of data that use width="100%". I want to replace these tables with an Ext.grid.GridPanel. Currently I place a div where I want the GridPanel and I render it to the div. I use viewConfig forceFit=true and when the browser is resized, I call "grid.getView().refresh(true);". When the browser is resized larger, the grid gets larger. However, when the browser is resized smaller, the grid does not get smaller. Instead, the whole page starts scrolling horizontally.

Is there a trick I can use to get the grid to size smaller, similar to how an HTML table would?

I understand how layouts work, to always set a layout, avoid over nesting, etc. However, I want to augment an existing app with ExtJS -- I don't yet want to rewrite the whole app to use a Viewport or similar top level ExtJS container. Basically I want the GridPanel to be the width the containing div would be if the div were empty.

NateS
23 Apr 2009, 9:09 PM
I got the following to work. Is this the best way? Ideally I wouldn't have to write some special code for each grid.


window.onresize = function () {
var position = grid.getEl().dom.style.position;
grid.getEl().dom.style.position = "absolute";
grid.setWidth(Ext.get("gridDiv").getWidth());
grid.getEl().dom.style.position = position;
}

Animal
23 Apr 2009, 10:49 PM
Try this plugin: http://extjs.com/forum/showthread.php?p=321082#post321082

The new window resize monitoring bit is untested, but... it should work!

NateS
23 Apr 2009, 11:01 PM
Neat. I will circle back soon and try this. Thanks! =D>