Question

我有一个TabPanel作为菜单。但是，此选项卡是基于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();
        }
    });
}

在这里，我有两种类型的标签。一个有孩子（有子菜单），没有孩子。例如，假设tabpanel如下所示：

信息中心-设置-用户个人资料

如何更改这些面板的内容。因此，当我单击“设置”时，我需要创建网格等。现在，它将仅为所有标签呈现此html: 'Test'。

如果我有类似的东西：

function dashboardContent(panel){// make grid here or a new panel}。如何将其添加到（ Dashboard ）标签面板内容中。

在Ext JS 6中动态更改TabPanel内容

0 个答案: