Binding click events to a Tab in Ext JS

Aloha again, SO.

I'm busy working on a project that is pretty much all ExtJS for the frontend work. I'm using version 4.0.0, presuming that is something necessary to know. I've got some code along the following:

panel = Ext.create("Ext.panel.Panel",{
        //initializing stuffs
})

A few of those then

 tabs = Ext.create("Ext.tab.Panel", {
        //initialize config
        items: [
               //the panels
        ]
  })

Now my big problem here is, I need to be able to bind an event to the actual tabs. I'm aware of being able to bind events to the tab panel and tab bar, but I need to actually bind the click event to one of the tabs in the panel. I tried something along the lines of this:

panel = Ext.create("Ext.panel.Panel", {
        //initializing stuffs
        listeners: {
                 click: {
                        fn: function() {
                            console.log("in click listener for panel")
                        }
                  }
         }
 })

However, the problem is, based on what I can tell, that binds to the actual panel itself, and not to the tab up in the tab bar. On an interesting side note, it actually doesn't even bind to the actual panel, as far as functionality is concerned, because I never see that console log information.

In any case, would any of you here happen to know how to bind events directly to the tabs? Or even how to get access to the tabs directly? I've been sifting through the ExtJS API docs, but I still can't find anything, so, it'd be awesome if someone he开发者_Python百科re could help! :D

Just to make it clear, I'm not trying to hook into the tab changing. I'm trying to hook into the actual click event of clicking the tab, because I am going to be checking if it is the middle mouse button being clicked so I can close the tab if it is.

I put this on a tab inside a tab panel in ExtJS 3. Something similar should work in 4.

listeners: {
    activate: function() {
        var me = this;
        Ext.fly(this.ownerCt.getTabEl(this)).on({
            click: function() {
                me.loadProducts();
            }
        });
    },
    single: true
},

loadProducts: function() {
    this.load({
    url: 'products.jsp',
    params: {
        caseID: window.caseID
    },
    scripts: true
});

You can add listeners to TabPanel itself that listen to beforetabchange and/or tabchange