我怎样才能让 ViewController 事件处理程序将 `this` 设置为 ExtJS 中的视图

Question

默认情况下，在 ExtJS 中，当一个人创建一个视图和一个关联的控制器，然后定义一个像这样的事件时 myevent: 'onEvent' 控制器中的 onEvent 被执行， this viewController.

是否可以让 this 成为视图？

Answer 1

您想要的方式不可能开箱即用。但是，您可以在呈现视图后设置侦听器的范围。 Fiddle供参考。

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myView',

    onAfterRenderView: function(view) {
        view.on({
            customEvent: this.onCustomEventView,
            // Notice what we're using as the scope here
            scope: view
        });
    },

    onClickCustomEventBtn: function() {
        this.getView().fireEvent('customEvent');
    },

    onCustomEventView: function() {
        console.log(this);
    }
});

要多加一点颜色，有思路defaultListenerScope on components, which allows you to create inline handlers on your view definition, instead of having to create a ViewController. In this scenario, if you're using this class in a class that has a ViewController, you have the ability to control the scope property in the listeners block. I can't find where this property is defined in the API docs, but the View Controllers Guide解释一下。

如果我们的按钮 class 看起来像这样：

Ext.define('ChildButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.myButton',

    // If we want class's to have handlers resolve to itself, this must be set
    defaultListenerScope: true,
    text: 'Fire Custom Event',

    onClickCustomEventBtn: function() {
        console.log('Firing from button class');
        this.ownerCt.ownerCt.fireEvent('customEvent');
    }
});

我们像这样实例化它：

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'myButton',
        listeners: {
            // If set to this, it'll use the class's handler def
            // If set to controller, it'll resolve to using the VC's def
            scope: 'this',
            click: 'onClickCustomEventBtn'
        }
    }]
}]

我们希望框架在 ChildButton class 中查找 onClickCustomEventBtn 因为我们设置 scope: 'this'... 如果我们简单地删除 scope 或将其设置为 'controller'，然后它将解析为 MyViewController 中的处理程序。

我怎样才能让 ViewController 事件处理程序将 `this` 设置为 ExtJS 中的视图

How can I have the ViewController event handler have the `this` set to the view in ExtJS

javascript

model-view-controller

extjs

viewcontroller