Question

我试图在Ext JS 4（MVC）中理解按钮，组合框和类似工作上的事件处理方式。

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

例如，我有以下工作：

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

看起来很简单，我选择'eventlist'视图并注册网格的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为此视图分配处理程序：

方式No1

最糟糕的一个 - 使用id：

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

方式No2

使用xtype：

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

方式No3

使用config属性：

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

当然你可以像f.i一样组合它们。结合xtype和config属性：

'newview[someProperty=propValue]': {

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

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

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

1 个答案:

方式No1

方式No2

方式No3