PDA

View Full Version : Resize view port



sanjay_1985
30 Jan 2014, 5:38 AM
Hi,
1. How do I resize view port based on browser's height/width?
2. I also need to render my components properly in all kinds of resolutions.
For resize, I am doing below step
listener


resize: {
fn: this.onViewPortResize,
scope: this
}







onViewPortResize: function (obj, w, h, ow, oh, eOpts) {

obj.setHeight(document.body.clientHeight);
obj.setWidth(document.body.clientWidth);



}



Could you please let me know how to achieve this?

sanjay_1985
30 Jan 2014, 5:53 AM
I am able to do setSize to achieve this
obj.setSize(document.body.clientWidth-500,document.body.clientHeight-200);

How do I make the components inside the viewport also to be resized accordingly?

palakurthivishal
30 Jan 2014, 5:57 AM
Hello sanjay_1985,
Viewport always occupy the entire width and height of the "document.body" even after you've resized the window. Correct me if I'm wrong.

sanjay_1985
30 Jan 2014, 6:00 AM
Thats fine. How do I resize the components inside my view port based on the browser size?

AssetWorks
30 Jan 2014, 7:44 AM
your components inside need to be fluid also.
- avoid using static width and height use flex or min/maxWidth and min/maxHeight instead.
- use layouts even when you think that is not needed.
for example:
a form that has fields can have

layout: {type: 'vbox', align:'stretch'}
-use border layouts as a container: I found this to be very fluid.