REQUIRED INFORMATION

Ext version tested:
  • Ext 4.1.0 GA & 4.1.1-rc2
Browser versions tested against:
  • Google Chrome 19
  • FF13 (firebug 1.9.2 installed)
DOCTYPE tested against:
  • HTML5
Description:
  • I did search on the forum, but could not find any relevant ticket. The ADD event is fired twice in the code sample below.
  • If there are heavy calculations or some other logic happens on TabPanel 'add' event, then it will be invoked twice.
Steps to reproduce the problem:
  • On Add event of TabPanel do some console logging.
  • Add a simple Panel to a TabPanel.
The result that was expected:
  • The Add event is fired once.
The result that occurs instead:
  • The Add event was fired twice.
Test Case:


Code:
var tabPanel = Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    listeners: {
         add: function(container, component, index, eOpts) {
             console.debug('tabpabel onAdd', component);
         }
    }
});

tabPanel.add(Ext.ComponentManager.create({
    xtype: 'panel',
    title: 'tab1'
}));

HELPFUL INFORMATION

See this URL for live test case: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel

Debugging already done:
  • The first event is fired on adding a Tab to the TabPanel.
Possible fix:
  • I'm not sure if this should be classified as a bug, but I'm looking for a way to invoke some method only once if a Panel is added to a TabPanel. Perhaps a different event?!
Additional CSS used:
  • only default ext-all.css
Operating System:
  • Windows 7 Pro SP1 x64