ExtJS Grid SelectionChange is fired in other controller

Question

I have a main application with a left navigation menu. My Main.js controller handles the treepanelselect event where a Tab is added:

onTreepanelSelect: function (selModel, record, index, options) {
        var mainPanel = Ext.ComponentQuery.query('mainpanel')[0];
        var newTab = mainPanel.items.findBy(
                  function (tab) {
                      return tab.title === record.raw.text;
                  });
        if (!newTab) {

            newTab = mainPanel.add({
                xtype: record.raw.class_name, // this is my View widget name
                closable: true,
                iconCls: "key",
                title: record.raw.text
            });
        }
        mainPanel.setActiveTab(newTab);
    },

Two of the Navigation menu items are:

• Employee (controller.Employee)
• Catalog (controller.Catalog)

controller.Catalog is my controller for managing my catalogs and is 100% separate from controller.Employee (2 different modules)

Here is my controller.Catalog:

refs: [
    {
        ref: 'grid',
        selector: '#gridCatalog'
    }],
    init: function (application) {

        this.control({

            'grid': {
                selectionchange: this.gridSelectionChange
            }
        });
    },
 gridSelectionChange: function (model, records) {        
        console.log("Catalog Row Selected");
    },

So the view.Catalogs has a gridCatalog and on selectionchange I get in my console: Catalog Row Selected.

On the other side, here is my controller.Employee:

 refs: [
        {
            ref: 'grid',
            selector: '#gridEmployee'
        }
    ],
    init: function (application) {
        this.control(
             {
                 'grid': {
                     itemdblclick: this.gridDoubleClick
                 }
             });
    },
gridDoubleClick: function (dv, record, item, index, e) {

       // nothing here for the moment.

    }

Ok, here is where the Devil comes to scene.

When I run my application, then I click my navigation item "Employee" and my tab is created with the view inside it. Until here we are fine.

But.... when I click one of the rows of my gridEmployee guess what?? I get in my console: Catalog Row Selected.

So, for some reason the controller.Catalog is listening to my gridEmployee... I don't have a selectionchange event handler in my controller.Employee. Those file are even in separate module folders inside my "app" folder.

Any clue on what I'm doing wrong? This is breaking my head :(

Answer 1

Both your controllers are listening to events from any grid since they are both using the grid component query inside init`. Improve your query so that it's not so generic.

    init: function (application) {
        this.control(
             {
                 // Don't listen to any grid, just #gridEmployee
                 '#gridEmployee': {
                     itemdblclick: this.gridDoubleClick
                 }
             });
    },

Second file

    init: function (application) {

        this.control({
            // Don't listen to any grid, just #gridCatalog
            '#gridCatalog': {
                selectionchange: this.gridSelectionChange
            }
        });
    },

You seem to have been under the impression that what you use for the refs affected the component query that is passed into this.control, but it doesn't See http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller-method-control