I trying renderTo a panel(Ext.panel with title:'titlet' in the end of code) to the mainView ('Foresto.view.main.Main') or to a part of courusel (id:'mapId') But i havn't got a positive result. So my quistions: 1) How to render panel to the mainview or to a courusel item ('mapId') 2)What mains approaches in Ext JS 6+, modern toolkit, for render object to the mainview or mainview's elements??
Now my code looks like that:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:"control-panel",
plugins: 'responsive',
responsiveConfig:{
tall:{
tabPosition:'center'
}
},
xtype: 'app-main',
controller:'menuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
'Foresto.view.forms.LoginRoom'
],
autosize:true,
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'FOREST'
}
},
tools: [{
type: 'menu',
handler: function() {
Ext.Viewport.toggleMenu('top');
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
title: 'MAP',
id:'mapId',
xtype: 'panel',
layout:'vbox',
padding: 0,
items: [{
xtype: 'panel',
title:'PLACEFORMAP'
}]
},{
title: 'REPORTS',
xtype: 'panel',
cls: 'foresBack',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:[{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT1',
margin:'10px'
},{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT2'
}]
}]
}
],
initialize: function() {
Ext.Viewport.add({
xtype:'button',
id:'pan11111',
text:'KAB',
flex:1,
height: 1000,
width: 100,
items:[{
xtype:'tabpanel',
title:'Projects',
layout:'card',
items:[{
xtype:'panel',
title:'11111'
},{
xtype:'panel',
title:'uuuuu'
}]
}]
});
}
}});
