Рассмотрим три Панели (Panel). Всё что нам нужно — это ключ «items» у родительского объекта Панели (Panel), который хранит в себе массив с другими Панелями.
var panel_two = Ext.create('Ext.Panel', { title: 'panel_two title', html: 'panel_two html', width: 200, height: 100 }); var panel_three = Ext.create('Ext.Panel', { title: 'panel_three title', html: 'panel_three html', width: 200, height: 100 }); var panel_one = Ext.create('Ext.Panel', { title: 'panel_one title', html: 'panel_one html', width: 400, height: 300, renderTo: 'panels', items: [ panel_two, panel_three ] });
На момент присваивания массива уже должны существовать Панели, которые будут вкладываться в родительскую Панель.
Складываем компоненты в HTML-контейнер. Это DIV с ID = «panels»
<div id="panels"></div>
Визуальное отображение Панелей в Панели в Ext JS
Информационные ссылки
Сайт разработчика Ext JS — https://www.sencha.com
Документация Ext JS версии 7.5.0 — https://docs.sencha.com/extwebcomponents/7.5.0/index.html
Метод Ext.create() — https://docs.sencha.com/extwebcomponents/7.5.0/modern/Ext.html#method-create
Класс Panel — https://docs.sencha.com/extwebcomponents/7.5.0/modern/Ext.Panel.html