Динамическое изменение содержимого TabPanel в Ext JS 6

Question

У меня есть табуляция в качестве меню.Тем не менее, эта вкладка создается на основе JSON, который я получаю удаленно, используя AJAX-запрос.Таким образом, мне нужен совет, как я могу динамически изменять содержимое этих вкладок (используя вызовы функций и т. Д.).

Это основной код:

Ext.onReady(on_ready);

function on_ready() {
    setTimeout("mainLaunch()", 1000);
}

function mainLaunch() {
    Ext.Ajax.request({
        url: 'myurl',

        success: function(response) {
            var text = response.responseText;
            var decodedText = Ext.decode(text);
            var menu = decodedText["menu"];
            var tabPanelItems = [];
            tabPanelItems.push({
                itemId: 'tab_logo',
                title: '<img src="Images/logo.png" style="width: 60px; height: 50px">'
            });
            for (var i = 0; i < menu.length; i++) {
                if (!menu[i].children) {
                    tabPanelItems.push({
                        itemId: 'a' + menu[i].id,
                        xtype: 'panel',
                        title: menu[i].text,
                        items: [{
                            html: 'Test'
                        }]
                    });
                } else {
                    var menuItems = [];
                    for (var j = 0; j < menu[i].children.length; j++) {
                        menuItems.push({
                            itemId: 'a' + menu[i].children[j].id,
                            text: menu[i].children[j].text,
                        });
                    }
                    tabPanelItems.push({
                        tabConfig: {
                            title: menu[i].text,
                            menu: Ext.create('Ext.menu.Menu', {
                                width: 250,
                                plain: true,
                                items: menuItems,
                            }),

                            listeners: {
                                mouseover: function() {
                                    this.showMenu();
                                }
                            }
                        }

                    });
                }
            }

            Ext.create('Ext.tab.Panel', {
                width: '100%',
                height: '100%',

                renderTo: 'mcrapplication',
                tabBar: {
                    layout: {
                        pack: 'center'
                    },
                    border: false
                },

                defaults: {
                    iconAlign: 'top',
                    bodyPadding: 15
                },
                activeTab: 1,

                listeners: {
                    beforetabchange: function(tabpanel, newcard, oldcard) {
                        if (newcard.itemId == 'tab_logo')
                            return false;
                    }
                },

                items: tabPanelItems
            }).show();
        }
    });
}

Здесь у меня есть два типа вкладок,Один с детьми (с подменю) и без детей.Например, предположим, что панель вкладок выглядит следующим образом:

Панель инструментов - Настройки - Профиль пользователя

Как изменить содержимое этих панелей.Поэтому, когда я нажимаю на «Настройки», мне нужно создавать сетки и все такое.Прямо сейчас он будет отображать только это html: 'Test' для всех вкладок.

Если бы у меня было что-то вроде:

function dashboardContent(panel){// make grid here or a new panel}.Как я могу добавить его к содержанию панели ( Dashboard ).