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

Posted 2023-02-24

【中文标题】Ext JS 4 - 理解 this.control、选择器和事件处理

【英文标题】：Ext JS 4 - understanding this.control, selectors and event handling

【发布时间】：2012-01-08 23:37:34

【问题描述】：

我试图在 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 选择器？

【参考方案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 属性。

【讨论】：

谢谢。我整天都在想办法解决这个问题。我很感激！