PDA

View Full Version : Window width as a percentage



JoeStar
9 Jul 2009, 10:36 PM
Hi All,
I am new to ExtJS so this may be a simple question but I struggled to find the solution in the API.

I want to be able to set the height/width of a window as a percentage. Is this possible?

JoeStar
12 Jul 2009, 7:58 PM
Does anybody know how to do this? I thought that this would be pretty straight forward...

Animal
12 Jul 2009, 9:33 PM
The two values you need are

Ext.lib.Dom.getViewportHeight()

Ext.lib.Dom.getViewportWidth()

IMHO, the adapter layer should either be documented, or have some of its facilities published in the Ext public interface.

JoeStar
12 Jul 2009, 10:36 PM
Thanks for the reply.

Can I clarify your solution, please forgive my ignorance but I am new to ExtJS.

I can not find this documented in the API: Ext.lib.Dom.getViewportHeight().

I assume that this is a static function that gets the current offsetHeight of the window, as in the current height of the existing veiwPort that my window is a child of. Is that correct?

If this is the case then I guess I will need to set my window to resize on a window resize event, is this correct?

Thanks in advance.

Condor
12 Jul 2009, 10:40 PM
IMHO, the adapter layer should either be documented, or have some of its facilities published in the Ext public interface.

Ext.getBody().getViewSize() will return the same two values.

Condor
12 Jul 2009, 10:43 PM
If this is the case then I guess I will need to set my window to resize on a window resize event, is this correct?

You can register a listener with Ext.EventManager.onWindowResize. The callback function gets the current viewport width and height as parameters.

JoeStar
12 Jul 2009, 10:52 PM
Ok cool, thanks for the advice.

So you can't use a percentage but instead:

task 1: get the current window height/width, construct the window height/width off of this.
task 2: Attach a resize event handler to perform task 1 on resize.

That is easier enough.

When the modal window is closed it is going to be disposed. Do I need to manually release the onresize when it is disposed or does the library handle this for me?

Thanks.

Animal
12 Jul 2009, 11:05 PM
You need to do it.

Think about it. There's no connection between your Window object and the listener.

Unless you write a plugin for the Window class which offers %age sizing, brower resize listening, and sets up its own destroy listener on the Window to clean itself up.

That might be a god exercise.

Condor
12 Jul 2009, 11:06 PM
Normally you would have to remove it yourself, but because Window already registers a resize listener you can use:


monitorResize: true,
doConstrain: function(){
this.constructor.prototype.doConstrain.apply(this, arguments);
// call setPosition/setSize here
}

monitorResize:true registers a onWindowResize listener.
You could put code in onWindowResize, but both afterShow and the onWindowResize method call doConstrain, so putting your code there saves you extra code.

Animal
12 Jul 2009, 11:12 PM
Good point. That's private right now, but perhaps it should not be...

http://extjs.com/forum/showthread.php?t=74159

JoeStar
12 Jul 2009, 11:34 PM
Thanks.

I was using another (crappy) js library previously so already have my own wrapper classes to abstract the base libraries implementation, so automating the cleanup shouldn't be to much trouble.

Is there any existing documentation on the best practices for cleaning up resources? I have a few pages that have a long life cycle that can potentially open and close a lot of modal windows etc. I am concerned that this could lead to memory leaks. If I remove the resize event and call distroy(), is this sufficient?

Animal
12 Jul 2009, 11:36 PM
Yes, it should be. If not, it could indicate an Ext bug.

JoeStar
12 Jul 2009, 11:40 PM
Ok great thanks for your help :)