Controller's listeners catching events (panel clicks) from other views

Question

I have this weird issue with ExtJS 4.2.1.

I have a controller whose listeners catch events from a view that it shouldn't.

Here's said controller:

Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            'panel': {
                render: function (panel) {
                    panel.body.on('click', function (panel, e) {
                        alert('onclick');
                    });
                }
            }


        });

    }
});

It 'controls' this view:

Ext.define('Customer_Portal_UI.view.NavigationMenu', {
    extend: 'Ext.form.Panel',
    alias: 'widget.navigationmenu',
    region: 'west',
    layout: 'fit',
    ui: 'cssmenu',
    loader: {
        autoLoad: true,
        url: '/resources/notloggedin.html'
    }

});

But it also catches panel clicks from this view:

Ext.define("Customer_Portal_UI.view.MainContent", {
    extend: 'Ext.form.Panel',
    alias: 'widget.maincontent',
    region: 'center',
    layout: 'card',
    border: false,
    activeItem: 0,
    requires: ['Ext.grid.Panel'],
    initComponent: function () {

        this.items = [
                                {
                                    xtype: 'panel',
                                    title: ''
                                },
                                {
                                    xtype: 'gridpanel',
                                    id: 'contactlistgrid',
                                    store: Ext.data.StoreManager.lookup('contactStore'),
                                    columns: [
                    ....
                                    ],
                                    features: [{
                                        ftype: 'grouping',
                                        groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
                                        hideGroupedHeader: true,
                                        startCollapsed: false
                                    }],
                                    viewConfig: { id: 'contactlistgridview' }
                                },
                                {
                                    xtype: 'gridpanel',
                                    id: 'caselistgrid',
                                    store: Ext.data.StoreManager.lookup('caseStore'),
                                    columns: [
                                                { text: 'Title', dataIndex: 'title' },
                                                { text: 'Description', dataIndex: 'description' },
                                                { text: 'Ticket number', dataIndex: 'ticketnumber' }
                                    ],
                                    viewConfig: { id: 'caselistgridview' }
                                }
                ]


        this.callParent(arguments);
    }
});

Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.

Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...

Thanks.

Answer 1

The fix was two fold as shown in here:

http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1

Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.