Question

I have a simple example here with a modal window that is a ‘view’. I want to have a button within the window that does a window close, so the lazy user doesn’t need to click the ‘X’ in top right.

My problem is I don’t know how to reference the view from within the controller. In the non-MVC world I would just do a ‘window.close()’ in the button handler. Any ideas? Thanks!

View

   Ext.define('AM.view.testwindow.window', {
    extend: 'Ext.window.Window',
    alias: 'widget.TESTwindow',
    title: 'TEST Window',
    layout: 'border',
    width: 1000, height: 400,
    minimizable: true,
    maximizable: true,
    closeAction: 'destroy',
    initComponent: function () {
        this.items = [

        {xtype: 'gridpanel', region: 'center',    // grid in the window
        store: 'Equipments',
        columns: [
          { text: 'Equip ID',  dataIndex: 'EquipmentID' }
          , {  text: 'StationID',     dataIndex: 'StationID' }
        ],

        dockedItems: [{
            xtype: 'toolbar',         // Grid's toolbar
            items: [
            {
                  xtype: 'button',              /* Close button to close the window */
                  text: 'Close Window',
                  itemId: 'btnTestClose'
              }
           ]
        }
      ]
    }
    ];
    this.callParent(arguments);
}
}); 

Controller

  Ext.define('AM.controller.testwindow', {
    extend: 'Ext.app.Controller',
    stores: ['Equipments', 'Stations'],
    models: ['Equipment'],
    views: ['testwindow.window', 'testwindow.Grid'],
    refs: [
    {        ref: 'TESTgrid',     selector: 'TESTgrid'   },
        {    ref: 'testwindow',   selector: 'testwindow'  }
    ],

    init: function () {

        this.control(
        {
            '#btnTestClose': {
                click: function (butt, e, options) {
                    alert('close handler!');
                    this.getTestwindowWindowView().close();   // this fails.   What should I do? ComponentQuery ?
                 }
            }

        }
        )
    }
}
);

Scope of ‘this’ from within Button handler

Answer 1

Your ref to the test window should match the alias TESTwindow (without the widget part), or maybe the long name testwindow.window:

refs: [
    {    ref: 'TESTgrid',     selector: 'TESTgrid'   },
    {    ref: 'TESTwindow',   selector: 'testwindow'  }
],

This will give you the autogenerated getter you need:

this.getTestwindow().close();

Getters are composed of get plus the reference selector with uppercase first letter.