Listening to events between view controllers

Question

I am having trouble trying to figure out how to listen to events fired in one View Controller from another ViewController.

My grid component defines a Listener

selModel: {
    listeners: {
        selectionchange: 'onChemClick'
    }
},

and my ViewController(called chemslist) has the function that fires another event

onChemClick: function(view, selected) {
    console.log("before firing");
    this.fireEvent('canvasData', this, selected.length);
    console.log("after firing");
    console.log(selected);
}

I have another controller that actually listens to this event and shows the data.

Ext.define('view.canvas.CanvasController', {
extend: 'Ext.app.ViewController',
alias: 'controller.canvas',

listen: {
    controller: {
        chemslist: {
            canvasData: 'onCanvasData'
        }
    }
},

onCanvasData: function() {
    console.log("At Fire");
}

});

For some reason I can't figure out why the CanvasController is not able to listen to the event. I did also go through the Ticket example and looked at how the events are fired and other viewControllers listen to them.

Also What would be a best practice if a selection on a grid in one region causes a lot of changes in another panel?, should the event be fired as a global so that all the components would listen to it ? or should i listen to it in the main Controller(not a ViewController) and generate the components based on the event ?

Thanks!

Answer 1

The docs say:

selectors are either Controller's id or '*' wildcard for any Controller.

Contrary to intuition, we are not supposed to assign any id or itemId to the controller we want to listen to but the id is automatically created by Application and the id equals to controller class name.

I've made simple example - button, 2 controllers C1 listening to button and C2 listening to C1.

Answer 2

Event handling is also working between ViewControllers, but you need to provide the controller's id in the listen config (as Saki stated), for your example the firing ViewController:

Ext.define('Edsp.view.chemslist.ChemsListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.chemslist',
id: 'chemslist',

The listening ViewController looks like this:

Ext.define('Edsp.view.canvas.CanvasController', {
extend: 'Ext.app.ViewController',
alias: 'controller.canvas',

listen: {
    controller: {
        '#chemslist': {
            canvasData: 'onCanvasData'
        }
    }
},

Answer 3

Small correction, id does not need a hash, in fact will not work with it, should be:

listen: {
controller: {
    'chemslist': {
        canvasData: 'onCanvasData'
    }
}