Extjs 4 MVC TabPanel - bad rendering tab - extjs

Question

Please, help me. I am creating a TabPanel using the MVC. At the time of rendering panel add tab. Here is the code of the two views and controller. The result is a distorted picture.
The title of the tab is drawn twice: at the top and bottom (stretched to full screen). When I change in the controller function addNewTab() the line "tp.add({xtype: 'mytab'}).show();"
to the other "tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();", then everything is rendered properly. I will be grateful for the help.
Views:
Ext.define('MY.view.Tab', {
extend: 'Ext.tab.Tab',
alias: 'widget.mytab',
initComponent: function() {
this.title = 'new Tab';
this.html = 'MVC New Tab Example';
this.callParent(arguments);
}
});
Ext.define('MY.view.TabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel',
initComponent: function() {
this.id = 'MYTabPanel';
this.callParent(arguments);
}
});
Controller:
Ext.define('MY.controller.TabPanel', {
extend: 'Ext.app.Controller',
requires: ['MY.view.Tab'],
init: function() {
this.control({
'#MYTabPanel': {
render: this.addNewTab
}
});
},
addNewTab: function(tp) {
tp.add({xtype: 'mytab'}).show(); //it work bad
//tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show(); //it work good
}
});

Answer 1

Your mytab class extends Ext.tab.Tab. That means that this code tp.add({xtype: 'mytab'});
is adding a Tab as a main view for the TabPanel. A tab is created automatically for every panel or container you add to the tab panel and consists of just the button-like component at the top of the view.
That means that when you call the code above, a Tab is created and pushed into the TabPanel as a view, then the TabPanel creates another another Tab using the same title and attaches it to the top of the Tab you just added.
This code tp.add({title: 'new Tab', html: 'MVC New Tab Example'})' works because you are actually adding a panel (The default xtype used by Ext is panel) and the TabPanel is creating the tab for you using the title you've provided.
To fix: make MY.view.Tab extend Panel instead of Tab. If you're trying to customize just the tab for a particular view, dig into the source for Ext.tab.Panel and check out the undocumented tagConfig property that you can add to TabPanel items.