ExtJs Window Resize on Browser Resize

In this blog, I will explain how to resize all the modal window on ExtJs on browser resize. In one of my recent project, I had a requirement to resize all the modal windows open at the same time on browser resize.  Following is the solution.

You must have some main view of app which should be rendered first when app starts. You have to add render event of that view as follow.


this.control({
'mainView': {
render: this.onMainViewRender
        }
});

Now add the following function in your controller file.


onMainViewRender: function() {
Ext.EventManager.onWindowResize( this.onBrowserResize, this );
}

Above function binds the browser resize event and add a callback function to it. Following is the function definition of onBrowserResize

onBrowserResize: function( width, height ) {

Ext.WindowManager.each( function( window ) {

if( !window.isXType( 'window' ) )
                return;                      
if( height < 600 ) {
                                window.maxHeight = height - 30;
                                window.doLayout();
                                window.center();
                        } else {
                                window.maxHeight = 600;
                                window.doLayout();
                                window.center();
                        }
                });
}

It might be possible that we have some message box open at that time so we have to ignore it. That'w why we are checking the window xtype. Here we are setting maxHeight of window. 600 is just the example here. You can change it with your own preference. Else loop is to restore window to it's original height and width if browser is resized to bigger height and width than window.

Hope this helps you.