如何将 xtype 作为项目添加到 Extjs 选项卡面板中动态创建的选项卡

Question

我创建了一个 ExtJS 选项卡面板，它将有 7 个选项卡，并且根据条件我想让选项卡处于活动状态并动态绑定绑定数据 (xtype)。

我想知道如何将 xtype 动态添加到选项卡。下面是标签面板代码。

    var empTabPanel= new Ext.tab.Panel({
            id: 'emptabpanel',
            width: '100%',
            xtype: 'container',
            layout: 'hbox',
            items: [{
                    title: 'Personal Details',
                    border: 0,
                    id: 'PERSONAL_DETAILS'
                },{
                    title: 'Department Details',
                    border: 0,
                    id: 'DEP_DETAILS'
                },{
                    title: 'Leave Details',
                    border: 0,
                    id: 'LEAVE_DETAILS'
                }]
        });

我想为部门详细信息添加 xtype。

Answer 1

无法绑定 xtype，因为 xtype 无法在运行时更改。一旦使用特定的 xtype 创建了组件，它就不能再更改。

您需要做的是创建多个选项卡，每个可能的 xtype 一个，并根据需要 show/hide 选项卡，或者在运行时使用 Ext.create 创建 create/delete 个选项卡。

Answer 2

因此，如果您想将新项目添加到部门选项卡，只需在添加到任何面板或容器时添加即可。

Ext.getCmp('DEP_DETAILS').add({ xtype: 'label', text: 'Hi' });

但是您不能更改现有项目的 xtype。但是，您可以 add/remove 他们。

如何将 xtype 作为项目添加到 Extjs 选项卡面板中动态创建的选项卡

How to add xtype as item to a dynamically created tab in Extjs tabpanel

extjs

extjs5