title: ExtJs Tabpanel Close Event with Closable tabs
body: <p>The listener I set up with doesn't seem to trigger. Here is my code:</p>
  
  <pre><code>  new Ext.TabPanel({
          id:'content-tab-panel',
          renderTo: 'trx_tabs_ext',
          activeTab: 0,
          minTabWidth: 150,
          tabWidth:180,
          enableTabScroll: true,
          autoScroll: true,
          resizeTabs:true,
          defaults: {
              autoScroll:true
          },
          items: [{
              title: 'No Active Chat',
              id: 'no_chat',
              closable: true,
              autoScroll: false,
              margins: '0 0 0 0',
              html: "&lt;div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \"&gt;&amp;nbsp;&lt;/div&gt;"
          }],
          width: '100%',
          height: '400px',
          listeners: {
              tabchange: function(tabPanel, newTab, oldTab, index)
              {
                  console.log('change tab');
              },
              beforeadd : function (tabpane, component, index) {
                  console.log('Adding new tab');
              },
              beforeclose: function(element) {
                  console.log('closing');
              }
          }
      });
  </code></pre>
  
  <p>The beforeadd an tabchange triggers and do so by writing a log at the console. But, the beforeclose does not.</p>
  
  <p>I also tried putting it inside the item of the Tabpanel, does not work either.</p>
  
  <p>What is the correct way to adding a close event in the TabPanel?</p>