简体   繁体   中英

Firing a custom event in ExtJS 5.1

I have been trying to fire a custom event when a file has been successfully uploaded using a modal window. A grid on the main page listens for the event and should reload its store when a file is successfully uploaded. Problem is, the grid never catches this event.

I think I have a fundamental misunderstanding of how custom events work. What steps should I take to get back on track?

SomeCommonUtilityClass.js

upload: function(args) {
    Ext.create('Ext.window.Window', {

    /* form with some controls */
        buttons: [{
            text:'Upload',
            handler: function() {
                var win = this.up('window');
                var form = this.up('form').getForm();
                form.submit ({
                    url: myAjaxCall,
                    success: function() {
                        /* fire event here */
                        win.fireEvent('uploadSuccess');
                    },
                    failure: function() {
                        /*...*/
                    }
                });
            }
        }, 
    /* etc. */
    });
}

SomeOtherFileView.js

{
    xtype:'grid',
    itemId:'uploadedGrid',
    listeners: {
        uploadSuccess: 'reloadUploadStore'
    },
    bind: {
        store:'{form}'
    },
    columns:[/*...*/]
}

SomeOtherFileViewController.js

reloadUploadStore: function() {

    console.log("My event fired!") // Never gets here.
    /* .... */
    store.load({
        params: ({
            a: "a",
            b: "b"
        });
        callback: function() {
            /* do more stuff */
        }
    });
}

SomeCommonUtilityClass

win.fireEvent('uploadSuccess');

Example of custom event and Controller that listen on it:

SomeOtherFileViewController

init: function() {
        this.listen({
            // We are using Controller event domain here
            controller: {
                // This selector matches any originating Controller
                '*': {      
                    uploadSuccess: 'reloadUploadStore'
                }
            }
        });
    },
    reloadUploadStore: function() {
        //your code
    }

or if you want pass a argument:

win.fireEvent('uploadSuccess',extraArgument);

Controller code is the same. Only your function definition changes:

reloadUploadStore: function(yourArgument) {
    //Do your stuff with extraArgument
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM