PDA

View Full Version : Automatically resizing Ext.Windows in the desktop example....



rbastic
26 Oct 2010, 7:11 AM
Hello,
I am integrating a hybrid windowing system into the ExtJS desktop example. To open up some of our apps using the prior windowing model inside ExtJS windows, I'm using Ext.ux.IFrameComponent ...

So, my question is an interesting one: I would like to appropriately resize the app's window after it has finished loading, is there an easy and generic way to enumerate the components within an Iframe and tally their height (so that I can then properly resize the window?)

I had this working in a different (and potentially unreliable) way before in the old system, but I'm afraid it may be difficult to access any DOM elements within the iframe for calculating height reliably.

I should note that the original approach required knowledge of the div ID's and would then enumerate them, summing elm.offsetTop for the zeroth element and elm.offsetHeight for any subsequent elements. This works relatively well, except occasionally on IE where a few pixels of "space fudging" is necessary.

I'd like to avoid the need to hardcode div IDs into the code this time around... But I'm not sure it's going to be reliable/possible. Thoughts/suggestions?

-Ryan

mschwartz
26 Oct 2010, 7:20 AM
http://james.padolsey.com/javascript/get-document-height-cross-browser/

Something like that on the IFrame's document/body.

Ext.Window has methods to set the width and height of the window and to get the window decoration width/height as well.

rbastic
26 Oct 2010, 7:31 AM
Hrm, fair enough. The problem then is grabbing a reference to the extjs window object that encapsulates a given iframe ... Note that this is all within the context of the desktop example (and I am already making the desktop object global, however it is not available inside the context of the iframe)

rbastic
26 Oct 2010, 7:36 AM
Also, getDocHeight() isn't working correctly here in this instance.. Perhaps because my viewport has a statusbar ? It may be difficult for me to post screenshots and other relevant code.

rbastic
26 Oct 2010, 7:38 AM
note that I was able to at least access the active window reference from within the window-script (i.e. what is opened up inside the iframe) using this:



window.parent.App_Desktop.getActiveWindow().setHeight( dh );


where dh is the result of a call to getDocHeight() ... but... the height returned is still too big overall, it should really be a sum of vertical controls within the form/window.

rbastic
26 Oct 2010, 7:52 AM
....I think I am going to have to take the same approach as last time -- namely, summing the height of each set of left/right elements within a given viewport (and then comparing sum(left) to sum(right) and using whichever size is bigger)...

The reason is with the previous approach the windows are opened up to a "bigger than necessary" size at first, and then resized once elements have been rendered [so as to calculate actual effective/necessary height]...

So now I am trying to code a function that will calculate the given *real* height for 'west' and 'center' regions of a viewport object ... So that the parent window can then be accurately resized using that.

<b>Is there such a function in ExtJS already, or some example code I can leverage to do this?</b>

rbastic
26 Oct 2010, 9:53 AM
Well, here's the code I came up with. For some reason, I need to add 45px in as a 'fudge factor' for it to size 100% correctly, but other than that it appears to calculate height properly and resize effectively for a given viewport.



function getDocHeight(vp) {
var leftHeight = 0, rightHeight = 0, fudgeHeight = 0;

for(var i = 0 ; i < vp.items.items.length; i++) {
var item = vp.items.items[i];
if (item.region == 'west') {
for(var j = 0 ; j < item.items.items.length; j++) {
var elem = item.items.items[j];
leftHeight += elem.getHeight();
}
} else if (item.region == 'center') {
for(var j = 0 ; j < item.items.items.length; j++) {
var elem = item.items.items[j];
rightHeight += elem.getHeight();
}

} else if (item.region == 'north' || item.region == 'south') {
if (item.region == 'north') {
fudgeHeight += item.tbar.getHeight();
}
if (item.region == 'south') {
fudgeHeight += item.bbar.getHeight();
}
for(var j = 0 ; j < item.items.items.length; j++) {
var elem = item.items.items[j];
fudgeHeight += elem.getHeight();
}
}
}

fudgeHeight += 45; // assuming this is the rough # of pixels that the window borders take

leftHeight += fudgeHeight;
rightHeight += fudgeHeight;

return Math.max(leftHeight, rightHeight);
}


And here's how I'm calling it:


try {
if (window.parent.App_Desktop != null && window.parent.App_Desktop != undefined) {
var dh = getDocHeight(viewport);
window.parent.App_Desktop.getActiveWindow().setHeight( dh );
}
} catch (ee_resize) {
// Attempting to resize failed
}



The try/catch is only necessary because this is in-progress and at a given time the new desktop may/may not be activated.

mschwartz
26 Oct 2010, 10:12 AM
You're doing it inside out.

Window has a panel that's an iframe, so from the window you can do iframe.getDocBody() or whatever the panel provides for getting at it.

rbastic
26 Oct 2010, 10:19 AM
But I need the heights of the individual components (within the viewport) to help me determine precisely how big the window should be.

Am I missing something totally obvious ?

mschwartz
26 Oct 2010, 10:28 AM
But I need the heights of the individual components (within the viewport) to help me determine precisely how big the window should be.

Am I missing something totally obvious ?

Look at the link I posted. Then set a breakpoint with firefox or chrome dev tools in that function and examine the DOM to see how to calculate the document height and width. I'm pretty sure you do not have to traverse the DOM to calculate the document height. You might have to reference offsetScroll or some other similar member of the iframe's document or window objects.

mschwartz
26 Oct 2010, 10:30 AM
You described trying to fit something into the desktop example. That'd mean Ext.Windows with iframes as the bodies, no?

So you're trying to resize the window so the contents of the iframe fits neatly, right?