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

Question

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

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

例如，我有以下工作：

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

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

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

我尝试了这个，但它不起作用（我也尝试选择而不是更改）：

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

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

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

Answer 1

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

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

  xtype: 'widget.newview',

  id: 'idForNewView',

  someProperty: 'propValue',

  // other stuff
});

现在您可以使用三种方式通过 control 为该视图分配处理程序：

way No1

最糟糕的一种 - 使用 id:

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

way No2

使用 xtype:

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

way No3

使用配置属性：

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

当然，你可以像 fi 组合 xtype 和 config 属性一样组合它们：

'newview[someProperty=propValue]': {

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

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