Extjs 4.0 MVC - 如何从控制器内关闭视图？答案

【问题标题】：Extjs 4.0 MVC - how to close a view from within the controller?Extjs 4.0 MVC - 如何从控制器内关闭视图？
【发布时间】：2011-11-22 22:52:02
【问题描述】：

我在这里有一个简单的例子，它有一个模式窗口，它是一个“视图”。我想在窗口中有一个关闭窗口的按钮，所以懒惰的用户不需要点击右上角的“X”。

我的问题是我不知道如何从控制器中引用视图。在非 MVC 世界中，我只会在按钮处理程序中执行“window.close()”。有任何想法吗？谢谢！

查看

   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);
}
});

控制器

  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 ?
                 }
            }

        }
        )
    }
}
);

按钮处理程序中“this”的范围

【问题讨论】：

标签： model-view-controller extjs view controller extjs4

【解决方案1】：

你的ref 到测试窗口应该匹配别名TESTwindow（没有widget 部分），或者可能是长名称testwindow.window：

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

这将为您提供所需的自动生成的 getter：

this.getTestwindow().close();

Getter 由get 加上首字母大写的引用选择器组成。

【讨论】：

是的....昨晚想通了。我认为 refs 只是访问组件的快捷方式，但实际上它们允许对组件进行硬连线引用。感谢您的回答！

【解决方案2】：

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

Try this

this.getWin().close();


ready ok

【讨论】：

请edit 解释为什么/如何此代码回答问题？不鼓励仅使用代码的答案，因为它们不像带有解释的代码那样容易学习。如果没有解释，则需要花费更多的时间和精力来理解正在执行的操作、对代码所做的更改、代码是否回答了问题等。解释对于试图从答案中学习的人和评估结果的人来说都很重要回答看看它是否有效，或者是否值得投票。
请写一些描述/评论，以便用户理解。