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

Question

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

具体来说，我相信在 MVC 中我们应该在控制器初始化函数中使用“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 使用三种方式为此视图分配处理程序：

1号路

最糟糕的——使用id：

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

2号路

使用 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 属性。