PDA

View Full Version : The "right" way to dynamically resize GridPanels



pixelmonkey
20 Jul 2009, 5:32 PM
Hi there,

I have an ExtJS GridPanel that lives inside a panel using BorderLayout. It is in the center region of the panel and there is an "east" region which is just used to render some HTML, somewhat similar to the Feed Viewer example.

Unlike the Feed Viewer example, I don't use a Viewport. My reason for not using a Viewport is that I simply want the GridPanel and east region area to be like a widget that is embedded within another page that has a lot of other functionality not provided by Ext (like toolbars, menus, etc.)

As a result, I faced the problem that my GridPanel and the Panel that contains it does not handle window resizes properly. So, I wrote a function that handles the window resize event and is implemented as follows:


TEST.relayout = function() {
var lastWidth = TEST.lastWidth;
var currentWidth = window.innerWidth;
if (lastWidth == currentWidth) {
return;
}
TEST.lastWidth = currentWidth;

Ext.utilz.msg('Resizing Page', 'This might take a few seconds!');

var task1 = new Ext.util.DelayedTask(function(){
// add grid to layout and re-render
var centerRegion = Ext.getCmp("centerRegion");
centerRegion.doLayout();
centerRegion.ownerCt.doLayout();

var eastRegion = Ext.getCmp("eastRegion");
eastRegion.doLayout();
eastRegion.ownerCt.doLayout();

// clearly a hack:
TEST.widgets.grid.setWidth(centerRegion.getWidth()-2);

TEST.widgets.grid.syncSize();
});

task1.delay(500);
}Though this "works", there's clearly a lot wrong with it. The worst thing about this solution is that it takes about 5 seconds to resize the GridPanel and reading area on Firefox 3.5. (it's faster in Chrome and Safari, but still slow) The FeedViewer within the Viewport has no problem resizing, so this is clearly a problem with my approach.

Can someone guide me toward what I want, here? Do I have to use a Viewport to get this right? And if so, is there a way to use a Viewport but not have the Viewport take up the full height/width of a page?

Also, you can see an example of the kind of "freestanding grid" I'm working with here (http://files.getdropbox.com/u/108390/ext-columnbug.zip).

Andrew

Condor
21 Jul 2009, 12:56 AM
My FitToParent plugin would be much easier here!

pixelmonkey
21 Jul 2009, 6:27 AM
I noticed r4875 in SVN has the following description:

"The grid also needs to layout on bodyresize (for example, if toolbar size has changed)."

Does that patch actually fix this issue automatically, making it unnecessary for me to manually re-layout the grid on the window resize event?

Andrew

Condor
21 Jul 2009, 9:39 AM
No, that fix was for when the toolbar(s) of a panel would change size resulting in a change in panel body size.

Normally, you only would have to resize the outer most container and the container layout mechanism resizes all contained items automatically.

If it doesn't, you probably misconfigured you layouts somehow.