Ext Window is not coming in center after browser resizing

Question

I have a window which is not coming in center after browser resizing. When I resizing the browser half of the window getting disappear

var Win,
    ViewPort = Ext.getBody(),
    winWidth = ViewPort.getWidth(),
    winHeight = ViewPort.getHeight();
Win = new Ext.IframeWindow({
                        id: 'H1',
                        modal: true,
                        resizable: true,
                        title: 'H1',
                        closable: true,
                        constrain : true,
                    });
    Win.width = (winWidth / 100) * 90,
    Win.height = (winHeight / 100) * 90,

Also when I am giving width and height by some percentage like

Win.width = '80%',
Win.height = '90%',

In this case is coming fine. But I don't want because of data and layout adjusment on window.

Answer 1

In this case you need to get new viewport(as per your code) of resized browser and then you have to set new width and height for win.

Here is the method you can use

window.onresize=function(obj){
    var viewport =  Ext.getBody();
    var H1Window = Ext.getCmp('H1');
    var H1WindowWidth = viewport.getWidth();
    var H1WindowHeight = viewport.getHeight();
    if(H1Window){
        H1Window.setWidth((bioMarkerWindowWidth / 100) * 90);
        H1Window.setHeight((bioMarkerWindowHeight / 100) * 90);
    }
}

Answer 2

You can try below code snippet:-

1. By using window id:

   Ext.getBody().el.dom.onresize = function() { if(Ext.getCmp('your_window_id')) { Ext.getCmp('your_window_id').center(); } }

2. By using window itemId:

   Ext.getBody().el.dom.onresize = function() { if(Ext.ComponentQuery.query('#your_window_id')[0]) { Ext.ComponentQuery.query('#your_window_id')[0].center(); } }

Hope this help you :)

Answer 3

Take a looke at the anchorTo method. This should work:

win.anchorTo(Ext.getBody(), win.defaultAlign);