Bind activate event to grid panel Extjs4

Question

I want to ask where exactly I can add a listener to my grid MVC.

When I do this nothing happens:

Ext.define('myApp.view.reslist' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.reslist',
    store : 'resStore',
    listeners: {
          activate: {
            fn: function(e){ 
                console.log('reslist panel activated');
                  }
            }
           },
    dockedItems: [{
           xtype: 'pagbar',
           store: 'resStore',
           dock: 'top',
           displayInfo: true
       }],
       ..... rest of grid configs

and it works with the click event :

listeners: {
          activate: {
            fn: function(e){ 
                console.log('reslist panel clicked');
                 }
          }
           }

note : the init of my controller is still empty :

Ext.define('myApp.controller.resControl', {
    extend: 'Ext.app.Controller',

    stores: ['resStore'],

    models: ['resModel'],

    views: ['reslist','pagbar'],

    init: function() {

            // nothing here 
        }
});

Answer 1

Actions and Events of a view goes into its appropriate controller. My views contain only the config and necessary methods used for building & rendering the component. All the event handlers, actions on buttons etc are in the controller. Here is how my controller would look like:

Ext.define('myApp.controller.resControl', {
    extend: 'Ext.app.Controller',
    stores: ['resStore'],
    models: ['resModel'],
    views: ['reslist','pagbar'],
    init: function() {

        this.control({
            'reslist' : {
                activate: function(e) { 
                        alert('reslist panel activated');
                }               
            }
        });
    }
});

Note that the activate event is called on the panel only when you use tab panel display. The event is called when the panel gets activated by clicking on the tab.