View Full Version : Finding component size needed to display without scrollbars

3 Feb 2011, 7:58 AM
I'm working on a generic way of finding the size that a component needs to be displayed so that there is no need for scrollbars. The idea is that I check the underlying scrollHeight/scrollWidth of the component (a grid, tabPanel, whatever) against the actual size that its currently being displayed, and then if the former is bigger than the latter, kick off a request to the window that ultimately contains the component telling it to resize by the amount needed (provided that there's enough screen real-estate).

This is needed because I don't want to (or can't!) calculate the exact size that a window needs to be to show, for example, a dynamically created grid with variable numbers of columns - but once I've rendered the grid, I should be able to determine if it could be displayed a bit wider and avoid the user having to scroll across - similarly, if I've got a dynamically built form that is deeper (higher) than the window in which it was populated, I should be able to determine this and make the window higher to compensate.

Note that this is not a 'layout problem' - I know how to layout the components such that the layouts do their work of resizing containing components, and of course would rely on the layout behaviour to enable me simply to add the required size differential to the overall containing window as this resize would filter down through the interim containing components to the one that I've tested.

It's a bit tricky - I've got as far as getting the relative size information using the following code:

Ext.override(Ext.Component, {
requestExpandVisible: function () {
var dom, height, width, containerSize;

if (!this.rendered) {

dom = this.getEl().dom;
if (!Ext.isDefined(dom)) {

containerSize = this.container.getSize();

height = dom.scrollHeight - containerSize.height;
width = dom.scrollWidth - containerSize.width;

console.log(String.format('Component:requestExpandVisible: height:{0} width:{1}', height, width));
// If height or width is positive, need more space - request increase in window size
// ...
});I've tested this in fireBug and am getting the intended results - but the more I think about the problem, the more I'm concerned about whether I'm going off down an overly complex path and whether there's an easier way to achieve the result.
I'm going to need to ensure that I call this method only when the component is fully rendered and shown (render alone is not enough as some of my multi-tabbed forms are rendered before they are shown due to the need to turn off deferredRender) - but that should be manageable.
But when I look at the full scale of the problem, I start to think about needing to work up a hierarchy of components ensuring that they all look nice. Its all possible, I'm just concerned it might get clunky - and I really want/need it to be generic/re-usable (of course!)

Before I do any more work on this, I thought I'd share here and ask if anyone else has done this, attempted this, or knows a much simpler way of attacking it that I just haven't thought of.

Thanks in advance for any thoughts and ideas