Search code examples
extjsextjs4extjs4.1extjs4.2extjs-mvc

ExtJS how to close a window from other function inside controller


In my controller (ExtJS 4.2.1) I have a function where I create a window like this:

refs: [{
        ref: 'holidayView',
        selector: '[xtype=holiday.view]'
    }],
    init: function (application) {
        this.control({
            '[xtype=holiday.view] button#btnPrint': {
                click: me.onPrint
            }
        });
    },
    onPrint: function () {

        var me = this;

        var window = Ext.create('Ext.window.Window', {
            title: 'My Window',
            itemId: 'myWindow',
            width: 300,
            height: 300,
            modal: true,
            layout: fit,
            items: [{
                xtype: 'panel'
            }]
        });

        window.show();

    },
    otherFunction: function () {
        var me = this;
        // here I need to close the window
        // I tried this:

        var window = me.getHolidayView().up('#myWindow'); // but its undefined
        // me.getHolidayView() is accesible

        // I also have tried this:
        var window = me.getHolidayView().down('#myWindow'); // also its undefined

    }

Any clue on how to get the window component so I can close it?

Thanks-

UPDATE:

I tried this and it worked great but now sure if this is the right way:

 var win = Ext.WindowManager.getActive();
            if (win) {
                win.close();
            }

Solution

  • Your error is within the following line:

    var window = me.getHolidayView().up('#myWindow');
    

    A window is by default floated an therefore has (by default) not a owner container. That is why you cannot look them up by using up() or down(), because they are not placed within that hierarchy. Below are three variants for accessing windows (or any other views)

    Variant A

    Using the WindowManager is absolutely fine. In addition you can do it from every part of your app. That is what Managers are for (like the StoreManager)

    var win = Ext.WindowManager.getActive();
    if (win) {
        win.close();
    }
    

    Variant B

    But there may be a situation with multiple windows, now the WindowManager can still provide you with all windows but you would need to iterate over them if you not know for sure that the active one is the one you are looking for. At this time the auto getter - or call the refs - becomes handy. First you need to ensure that you have either your own view for your window or any unique identifier. Now you can create ref for your window as you have already done it in your example. Following a example that uses a different selector:

    {
        ref: 'customWin',
        selector: 'window[itemId=anystring]'
    }
    

    Note that the following selector will look for a window with a property called itemId which is defined like itemId:'anystring'. Also note that a ref can also create the window, if nit not already exist. See the refs docs for more information. Also note the created refs are public, meaning just get the controller instance from anywhere in your app (I suppose you have a appProperty defined) and call the created getter like so

    App.appPropertyValue.getController('name').getCustomWin()
    

    Variant C

    Last but not least you can create your own getter like @incutonez has done it.

    getMyWindow: function() {
      var myWindow = this.myWindow;
      if (!myWindow) {
        myWindow = this.myWindow = Ext.create('Ext.window.Window', {
          title: 'My Window',
          width: 300,
          height: 300,
          modal: true,
          layout: fit,
          items: [{
            xtype: 'panel'
          }]
        });
      }
      return myWindow;
    }