Add new tab on tabPanel extJS - extjs

Question

I'm just starting to learn extJS, so don't be very strict for my questions).
So this is my Main.js:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List',
],
controller: 'main',
viewModel: 'main',
plugins: 'viewport',
ui: 'navigation',
header: {
layout: {
align: 'stretchmax',
},
title: {
bind: {
text: 'Some items',
},
flex: 0,
},
items: [
{
xtype: 'button',
text: 'Items',
margin: '10',
handler: 'onMouseDown', // this is my handler for create new tab
},
{
xtype: 'button',
text: 'Logout',
margin: '10',
handler: 'onClickButton',
},
],
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none',
},
},
defaults: {
bodyPadding: 20,
tabConfig: {
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left',
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120,
},
},
},
},
items: [
{
title: 'Items',
items: [
{
xtype: 'mainlist',
},
],
},
],
});
And this is my MainController.js:
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
},
onClickButton: function () {
localStorage.removeItem('MyAppLoggedIn');
this.getView().destroy();
Ext.create({
xtype: 'login',
});
},
onMouseDown: function () {
var tabPanel = Ext.create('Ext.TabPanel', {
listeners: {
tabchange: function (newTab) {
if (newTab) {
onAddTab(tabPanel);
}
},
},
items: [
{
title: 'Items',
items: [
{
xtype: 'mainlist',
},
],
},
],
renderTo: Ext.getBody(), // I want to render to tabPanel, not to body
});
},
});
After click I need to create a new Tab in my tabPanel.
May be I need just to change renderTo, but T'm sure that an elegant way exists:
renderTo: Ext.select('some tab class')

Answer 1

To add Tab to this Tab.Panel you need to use add function on the view.
To get View in ViewController you can use this.getView() function.
Example on Sencha (dynamically add tabs): https://examples.sencha.com/extjs/7.2.0/examples/kitchensink/?classic#reorderable-tabs
Example Your ViewController:
Ext.define('MyApp.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
},
onClickButton: function () {
localStorage.removeItem('MyAppLoggedIn');
this.getView().destroy();
Ext.create({
xtype: 'login',
});
},
onMouseDown: function () {
var tabPanel = this.getView();
tabPanel.add({
items: [{
html: "xyz"
}]
});
}
});