model-view-controller - Ext JS 4 - 理解 this.control、选择器和事件处理

Question

我试图在 Ext JS 4 (MVC) 中了解按钮、组合框和类似工作的事件处理方式。

具体来说，我相信在 MVC 中，我们应该在 Controller init 函数中使用“this.control”。

例如，我有以下工作:

this.control({
    'eventlist': {
        itemdblclick: this.eventRowClicked
    },
    'eventedit button[action=save]': {
        click: this.updateEvent
    }
});

看起来很简单，我正在选择“事件列表” View 并为网格注册 eventRowClicked 事件。然后，在我的“eventedit” View 中，捕获按钮单击(保存按钮)。

我接下来需要的是响应组合框选择或更改事件。我认为有多个组合框，所以我需要一个特定的组合框。

我试过这个，但没有用(我也试过选择而不是改变):

'eventedit dispositionpop': {
    change: function(combo, ewVal, oldVal) {
        debugger;
    }
}

我能找到的所有示例都不使用“this.control”，它们要么将组件(Ext.get？)抓取到一个变量中，要么类似。我相信这些方法不是正确的 mvc - 或者可能不是 Ext JS 4 最有效的方法。

所以我想知道的两件事 - 我将如何注册特定的组合框选择或更改事件，以及我可以阅读什么以更好地了解 this.control 中发生的事情 - 例如，那些 css 选择器？

Answer 1

这些不是 css 选择器，但它们就像 css 选择器。让我们来看看这样一个简单的例子。您的一个 View 具有这样的结构:

Ext.define('MyApp.NewView', {
  extends: 'Ext.SomeCmp',

  xtype: 'widget.newview',

  id: 'idForNewView',

  someProperty: 'propValue',

  // other stuff
});

现在您可以通过 control 分配处理程序对于此 View 使用三种方式:

方式一

最糟糕的一个 - 使用 id:

this.control({
    // notice the hashtag
    '#idForNewView': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

方式二

使用 xtype:

this.control({
    'newview': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

方式 3

使用配置属性:

this.control({
    '[someProperty=propValue]': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

当然，您可以像 f.i. 一样将它们组合起来。结合 xtype 和 config 属性:

'newview[someProperty=propValue]': {

用空格和 > 分隔选择器与 css 中的含义相同。

对于您的示例，最好的方法是 No3 或结合 xtype 和 config 属性的方式。