javascript - ExtJS: check window state (is minimized, is maximized, etc) - Stack Overflow

ExtJS provides a number of configs as to whether a Window is configured as maximized, minimizable, etc. It also provides the functions to maximize and minimize a window.

Can't find however what the correct way to fetch an existing window state is. What I need is functions similar to the below:

var myWin = Ext.create('Ext.window.Window', { ... });
...
myWin.isMinimized(); // is current window minimized?
myWin.isMaximized(); // is current window maximized?

Can the current window's state be retrieved from the window instance?

ExtJS provides a number of configs as to whether a Window is configured as maximized, minimizable, etc. It also provides the functions to maximize and minimize a window.

Can't find however what the correct way to fetch an existing window state is. What I need is functions similar to the below:

var myWin = Ext.create('Ext.window.Window', { ... });
...
myWin.isMinimized(); // is current window minimized?
myWin.isMaximized(); // is current window maximized?

Can the current window's state be retrieved from the window instance?

• javascript
• extjs
• extjs4.1

Share Improve this question Follow asked Mar 4, 2013 at 10:30 Joseph Victor ZammitJoseph Victor Zammit 15.3k1313 gold badges8181 silver badges104104 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

For maximize() there is a boolean property maximized which you can pick up from an object:

if (myWin.maximized) { ... }

However for minimize() ExtJS doesn't provide any functionality and expects individual implementation. Hence, there is no any minimized property supported from the box.

@VisioN's answer is already plete but I want to show you a snippet using toggleCollapse() to hide the window:

Ext.create('Ext.Window',{
    height: 100,
    width: 100,
    minimizable: true,
    listeners: {
        minimize: function(){
            var win = this;
            win.toggleCollapse();
            if (!win.getCollapsed()) {
                win.center();
            } else {
                win.alignTo(document.body, 'bl-bl');
            }
        }
    }
}).show();

One solution for anyone looking, instead of using minimizable config, use tools. Here is plete example..

var isMinimized = false;   //if you want to check for minimized elsewhere..
var winWidth;          //to restore to actual width.
Ext.create('Ext.window.Window', {
    title: 'Hello',
    closable : false,
    width : 300, height : 400,
     tools: [
                {  
                    type: 'restore',
                    hidden : true,
                    handler: function( evt,toolEl,owner,tool ) {
                        var window = owner.up( 'window' );
                        window.expand('',false);
                     window.setWidth(winWidth);
                        window.center();
                        isMinimized = false;
                        this.hide();
                        this.nextSibling().show();
                    }                                
                },{  
                    type: 'minimize',
                    handler: function( evt,toolEl,owner,tool ){
                        var window = owner.up( 'window' );
                        window.collapse();
                        winWidth = window.getWidth();
                        window.setWidth( 150 );
                        window.alignTo( Ext.getBody(), 'bl-bl');
                        this.hide();
                        this.previousSibling().show();
                        isMinimized = true;
                    }                                
                }                            
            ]
}).show();