PDA

View Full Version : Resize a window using setWidth and setHeight on browser resize



Thinker Bug
1 Apr 2014, 4:44 AM
Hi,

I have a window that sizes itself according to the browser width and height.

I have to resize this rendered window on browser resize as well.

I have written the following code for that:
var myDialog = Ext.widget('mydialog');
myDialog .setHeight(Ext.getBody().getViewSize().height- 100);
myDialog .setWidth(Ext.getBody().getViewSize().width- 100);
myDialog .doLayout();

But not working.Please help.

Thanks

scottmartin
1 Apr 2014, 2:14 PM
Something like this perhaps?



Ext.application({
name : 'Fiddle',

launch : function() {
var winPad = 100,
win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{
header: 'World'
}],
store: Ext.create('Ext.data.ArrayStore', {})
}
}).show();


Ext.EventManager.onWindowResize(function() {
win.setX(winPad-(winPad/2));
win.setWidth(Ext.getBody().getViewSize().width-winPad);
});
}
});

Thinker Bug
1 Apr 2014, 10:15 PM
Thanks , got it working.
In my MVC app, the window is defined as a view, without height and width.
On window's 'beforerender' event its height and width are set.

The latter resizing is done in viewport resize event.

I have a singleton class set for global properties used across my application.
When the window object is created, I maintain this object as a global property under MyApp.Global.MY_DIALOG ,I change this object's height and width on viewport resize,
instead of selecting the widget using Ext.widget('mydialog') and setting width and height to it.