Tab Panel behaviour breaks when something is added to Tab Bar Dynamically - sencha-touch

Question

I tried adding this.callParent(arguments) to the tab panel's initialize event
as suggested by http://www.sencha.com/forum/showthread.php?234909-tab-panel-doesn-t-switch-between-tabs-when-added-dynamically but I get:
Uncaught Error: this.callParent() was called but there's no such method (doFire) found in the parent class (Ext.Base).
Could someone point me in the right direction?
Thank you.
My controller follows:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mytabpanel: '#mytabpanel'
}
},
init: function(application) {
this.control({
mytabpanel: {
initialize: function(component, options){
var bar = component.getTabBar();
bar.insert(0, { flex:1, xtype:'toolbar', title: '' });
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
this.callParent(arguments);
}
}
});
}
});
My view follows:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
id: 'mytabpanel',
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html: 'tab 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html: 'tab 2'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html: 'tab 3'
}
],
tabBar: {
docked: 'bottom'
}
}
});
EDIT Sunday, 30 December 6:57 a.m (GMT - 4:00)
From searching the web I now believe that because I am overriding initialize then I need to call the superclass' initialize method so that its code will be executed as well. As pointed out by user1479606 calling this.callParent will never work. So, the question becomes: How do I call the superclass' initialize method?

Answer 1

I think your application won't work in your case because you should use this.callParent(arguments) in your view not your controller otherwise your parent class will always be Ext.Base.
For easier to understand and better approach, why don't you follow the Sencha Touch 2 convention like this:
config: {
refs: {
mytabpanel: '#mytabpanel'
}
control: {
mytabpanel: {
initialize: 'domytabpanel'
}
}
},
domytabpanel: function(component, options) {
var bar = component.getTabBar();
bar.insert(0, {
flex:1,
xtype:'toolbar',
title: ''
});
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
}
Hope it helps :)