Grid scrolling issue in EXT.JS 4.0.5, not accounting for toolbar heights

Question

I've got this grid:

Any idea why it would be doing this? I know the inner panel needs to be 350px, and applying this in firebug works fine, but of course Ext likes to recalculate everything on the fly and I can't figure out where to apply a height to the inside panel to get it to show the right behavior.

I'm aware 4.0.5 uses virtual scrollbars, and I've disabled them by setting scroll: false on the grid component, and adding style: { overflowX: 'hidden', overflowY: 'scroll' } to its viewconfig. The problem is that the inside panel isn't accounting for the toolbar heights, and its pushing the scrollbar under its container. I can't upgrade extjs, either. Any ideas?

Answer 1

This looks like a bug that was addressed in 4.1, however I can't really test your code so it's hard to tell, you can try doing this in the grid's viewready event:

grid.determineScrollbars();

As covered here in the 4.07 docs.

Edit:

How about simply trying to relayout the component after the viewready event:

grid.on('viewready', function(grid) {
    grid.doComponentLayout()
});

(Or the MVC way for event handling if you're using that)