Extjs6 自定义js事件

Question

我有以下流程：在应用程序启动之前，我想检查服务器上的某些内容。我想根据反应做出决定。我创建了一个实用程序 class 来包装我的 js 事件以及一个应用程序控制器。

下面是应用程序控制器：

Ext.define('MyApp.controller.AppController', {
    extend: 'Ext.app.Controller',
    appEventDispatcher:function (){
      // Create a dummy DOM element 
        var dummy = document.createTextNode('');

        // Create custom wrappers with nicer names
        this.off = dummy.removeEventListener.bind(dummy);
        this.on = dummy.addEventListener.bind(dummy);
        this.trigger = function(eventName, data){
            if( !eventName ) return;
            var e = new CustomEvent(eventName, {"detail":data});
            dummy.dispatchEvent(e);
        }
    }
 });

还有我的效用 class:

Ext.define('MyApp.util.Util', {

    statics : {
        checkSomethingOnServer: function(customEvent){
            var store = Ext.StoreManager.lookup('appStore');
            store.load({
                scope: this,
                callback: function(records, operation, success){
                    if (success === true){
                        customEvent.trigger('success', true);
                    if (success === false)
                        debugger;
                        customEvent.trigger('fail', true);   
                    }
                }
            });
        }

    }
});

使用实用程序 class 我加载了一个商店。在回调方法中，我触发了我的自定义事件。此事件在 app.js 文件中处理。

该代码在 fiddle 中工作，并且还使用了应用程序监视，当我想构建代码时，出现了一些错误，抱怨（语法错误）。

我也创建了一个 fiddle。

如何在ExtJS中创建自定义事件以及如何使用它？我需要与 js 事件相同的行为，但 Extjs 实现。

Answer 1

在 ExtJS 中，您只需将事件侦听器附加到带有自定义事件名称的商店：

store.on('myownevent', function(success) {
    console.log(success);
});

您的代码可能会继续并通过该名称在商店中触发事件：

store.load({
    scope: this,
    callback: function(records, operation, success){
        store.fireEvent('myownevent', success);
    }
});

如果没有附加该事件的侦听器，则什么也不会发生；如果附加了一个或多个侦听器，则按优先级顺序执行，对于具有相同优先级的，按添加顺序执行。

https://fiddle.sencha.com/#view/editor&fiddle/21g7

Extjs6 自定义js事件

Extjs6 Custom js event

extjs

extjs6

extjs6-classic