Extjs6 Custom js event

Question

I have the following flow: before the app launches I want to check something on the server. Based on the response I want to make a decision. I've created an utility class that wraps my js event and also an app controller.

Bellow is app controller:

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);
        }
    }
 });

And my utility 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);   
                    }
                }
            });
        }

    }
});

Using the utility class I load a store. In the callback method, I trigger my custom event. This event is handled in the app.js file.

The code works in fiddle and also using app watch, when I want to build the code some errors are occurring complaining(syntax error).

I've created also a fiddle.

How to create a custom event in ExtJS and how to use it? I need the same behavior as with the js event but Extjs implementation.

score 0 · Accepted Answer · answered Jun 14 '17 at 14:10

0

In ExtJS, you would just attach an event listeners to the store with your custom event's name:

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

and your code may go ahead and fire events on the store by that name:

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

If no listener for that event is attached, nothing happens; if one or more listeners are attached, they are executed in the order of priority, for those with the same priority, in the order they were added.

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

answered Jun 14 '17 at 14:10

Alexander

19,906
19
75
162

And if I have a simple Ext.Ajax request instead of store load? With store I can use for example StoreManger to get a reference to it, and attach listener but how to do this with ajax? – florin Jun 16 '17 at 09:44
You can always attach an event to `Ext.Ajax` because [`Ext.mixin.Observable`](http://docs.sencha.com/extjs/6.2.1/classic/Ext.mixin.Observable.html) is mixed into `Ext.Ajax`. However, I cannot recommend that because Ext.Ajax is a singleton. However, this seems to be an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). What are you trying to achieve? – Alexander Jun 16 '17 at 10:36
In [this](https://fiddle.sencha.com/#view/editor&fiddle/21l0) fiddle, I change the code so that I use ajax instead of store. I added some comments to in the code to describe what I want to do (this is a more to the point problem). In the big picture, i want to understand how to create custom events and how to use them – florin Jun 16 '17 at 12:33
[this](https://fiddle.sencha.com/#view/editor&fiddle/21m4) is what I was looking for. Your previous comment help me to search in the right direction. – florin Jun 16 '17 at 21:38
Glad that you found what you searched for, however, this does not look like good code. In ExtJS, you should bind events to something that has the need to throw events. E.g. if a store is sorted, the store throws the `onsort` event. If a certain formfield starts an Ajax request, the form field should throw the event. And so on. That's what I meant by "XY problem". – Alexander Jun 17 '17 at 05:42

Extjs6 Custom js event

1 Answers1