ExtJS TabItem Click Event - extjs

Question

Good Morning All,
I have an ExtJS 5 tabpanel. When the tabpanel first appears there is a single tab inside with a star for the title. What I need is when the user clicks the star for it to create a new tabItem. I have tried the activate event but that only works with more than one tab present. I have also tried binding to the a click event and nothing happens for that. Here is the code I have now:
{
xtype:'tabpanel',
itemId:'tabCtr1',
width:785,
items:[
{ iconCls: 'btn-NewTab', html : 'A simple tab' }
]
}
function assetDetailsDialog_AfterRender(sender, eOpts)
{
parent.down('tabpanel').items.getAt(0).on('click', function(){
alert('Hello World');
});
}
Thanks everyone
Follow On Issue:
I am having one more issue with setting the active tab. When the button is click it creates the new tab not issue, but when I call setActiveTab it appears to do nothing. When I stepped through it in Chrome I can see it is actually changing the tab to the specified one but then switching it back to the original. Any help would be great. Any idea's?

Answer 1

I have created a fiddle which demonstrates how to add tabs dynamically on click, the code is also listed below in case the link breaks. In the code below, the significant thing is adding the listener to the tabConfig
Ext.application({
name: 'Fiddle',
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 800,
height: 400,
renderTo: document.body,
items: [{
title: 'Click me to add another tab',
tabConfig: {
listeners: {
click: function(tab) {
alert("Adding another tab");
var newTab = tabPanel.add({
// we use the tabs.items property to get the length of current items/tabs
title: 'Tab ' + (tabPanel.items.length + 1),
html: 'Another one'
});
}
}
}
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
}
});
Most of this code was taken from the documentation here