View Full Version : Region Size

2 Jan 2007, 11:35 PM
I have a calendar that I want to be the same height as the "center" region that it's contained in. How do I trigger a function when a region is resized by a browser window and how do I access the region's size?

3 Jan 2007, 12:37 AM
Try, just try to read the docs: http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.LayoutRegion.html#event-resized

You'll be amazed. :roll:

3 Jan 2007, 2:07 AM
I've read the docs. I've even read through all the code (yet can't completely follow it). I tried the 'resized' event and it only worked for regions that are being manually adjusted by the user. It did not work for the browser window resizing.

3 Jan 2007, 3:01 AM
OK, you'll need to respond to the layout event: http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.BorderLayout.html#event-layout

The layout is relayed on window resize.

Probably best to keep a reference to the Regions you are interested in, and examine the width/height of the Region's el: http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.LayoutRegion.html#el

3 Jan 2007, 3:04 AM
It may be that the Region's resize event should be fired if a layout event caused a resize???

3 Jan 2007, 6:12 AM
The resize only fires if the user resizes it to enable state change and keep the layouts fast. If the triggered everywhere things would grind.

The way I do it is to use the setSize method. You can either override it, or create an interceptor/sequence.

panel.setSize = panel.setSize.createSequence(function(width, height){
// called every time the *after* panel is resized

panel.setSize = panel.setSize.createInterceptor(function(width, height){
// called every time the *before* the panel is resized
// you can return false to cancel the default action

3 Jan 2007, 11:27 AM
Thanks Jack! You da man!

3 Jan 2007, 4:03 PM
Is this height that is passed, the height of the bodyEl of the panel? (thus height of region - height of title - height of tabs?)

4 Jan 2007, 2:11 AM
I think setSize calls adjustForComponents (ln 156-167 in contentPanel.js) to get the true height of the bodyEl (minus tabs and maybe titlebar).

I haven't tested it, but you could try something like:

panel.setSize = panel.setSize.createSequence(function(width, height){
var size = panel.adjustForComponents(width, height);

4 Jan 2007, 3:41 PM
Ok i am using the sequence way of intercepting size changes. This works to a certain extent, for i am encountering the following problem.

I have a center region that may contain multiple panels. Each panel has an on activate event listener that updates the panel upon activation. Also i have the setsize sequencer in place. This causes problems in the case of panel activation, for somehow this not only initiates a panel content update, it also initiates a setsize call. As you might guess these two conflict, since the setsize tries to resize a panel that is in the process of being updated. How to overcome this problem?

Any ideas?

My live code is at: http://www.trendon.nl:9999/roosterhulp2/index.php



5 Jan 2007, 12:45 AM
That's a very nice looking app. Are you saying you were getting a content reload (A call to eg: http://www.trendon.nl:9999/roosterhulp2/index.php?action=calendar&hospital_id=1) on resize?

I don't see that.

It is refreshing on tab activation. If you don't want that, I think you can use the loadOnce indicator:


5 Jan 2007, 3:49 AM

Thanks Animal! I changed things again, so the problems i described earlier arent directly visible anymore. Things im still a bit stuck on are the following.

The setsize method is called upon tab activation. It isnt called upon showpanel or add panel however. Is this correct? And if i show my first panel, shouldnt this be the same as activating a panel, hence force a setsize?

In my app i actually want the contents of a panel to reload upon tab activation. But i have also sequenced the setsize method which resizes the content of the active tab. As you might guess these two conflict upon tab activation, since the setsize might be earlier trying to set the size of content that is not fully refreshed. I still wonder how to overcome this? (at the moment in my app i only do non-content related resizes, only changing some css classes for which i do not need content info.)

Then i still have some size problems, if you view my app at 1280*1024 in ie6. Then when the browser window is maximized, open up 2 tabs. Then collapse the west region. All goes well till here. Then make the browser window smaller. At one tab a horizontal scrollbar appears, at the other it doesnt. I havent got a clue on how to fix this. It might be my code failing, however since the resizing goes well in all other situations, im thinking something with the setsize goes wrong. I appreciate any input.

Thanks again,