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!

Humbertohumble

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.

Yeorgi

I tried setting an id and using the wildcard. neither of them work. I don't know if i'm missing something that is really obvious or if something is really wrong! – Humbertohumble

your example works, if both of them are Controllers. What if they are ViewControllers ? – Humbertohumble

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'
        }
    }
},

Upward

Answer 3

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

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

Traver

This is the right way, no hash when using an alias in extjs 5.x – Pathless

just to make this extra clear, no id needs to be set on a view controller, the alias can be used as the key in the controller object – Manage