Grid.autoSize()

[Animal]

Shouldn't this auto size the grid to the size of it's containing element?

For instance, I have a YAHOO.widget.Dialog containing a YAHOO.ext.TabPanel.

I'm hooking the window resize event:

YAHOO.widget.Overlay.windowResizeEvent.subscribe(function()
{
if (this.ownerDialog)
{
var contentArea = document.getElementById("content");
var cxy = YAHOO.util.Dom.getXY(contentArea);
this.ownerDialog.cfg.setProperty("height", Math.min(570, (YAHOO.util.Dom.getViewportHeight() - cxy[1])) + "px");
this.ownerDialog.cfg.setProperty("width", (contentArea.offsetWidth - 2) + "px");
}
if (this.grid)
{
this.grid.autoSize();
}
}, this, true);


The Dialog resizes fine, and the tab panel shrinks when I shrink the window. But the Grid which I've rendered into the bodyEl of the tab panel does not resize itself.

[jack.slocum]

autoSize will match it to it's container. Is the container also being resized? (Is the dialog the container?)

Sometimes it requires a set timeout and sometimes, like in the forum, it requires a hack to get IE to recognize the new size.

[Animal]

The TabPanel is the container that I render the grid into. I can see that shrinking as I drag the right edge of the window leftwards.

[jack.slocum]

I'm not sure what's going on. Try using a DelayedTask at like 50/100 milliseconds, this will make sure the browser has caught up and will also keep the grid from resizing constantly during the drag operation.

Add this in the code you pasted:

if(!this.gridSizeTask){
this.gridSizeTask = new YAHOO.ext.util.DelayedTask(this.grid.autoSize, this.grid);
}
this.gridSizeTask.delay(50);


The DelayedTask object handles setting and clearing timeouts for repeated events, providing a buffer so the code doesn't execute any more than once every x milliseconds.