Class Ext JS 4:每个选项卡中都有相同的容器

Class Ext JS 4:每个选项卡中都有相同的容器,class,extjs,tabs,extjs4,containers,Class,Extjs,Tabs,Extjs4,Containers,我目前正在使用ExtJS4,有一个包含大约4个选项卡的选项卡面板,我想在每个选项卡中放置一个包含两个工具栏的容器。但是,每当我尝试这样做时,它只会将容器添加到最后一个选项卡,并将前三个选项卡保留为空。以下是我的代码片段: function createTabPanel(config) { return new Ext.Panel(Ext.apply({ region: 'center', dockedItems: [ dat

我目前正在使用ExtJS4,有一个包含大约4个选项卡的选项卡面板,我想在每个选项卡中放置一个包含两个工具栏的容器。但是,每当我尝试这样做时,它只会将容器添加到最后一个选项卡,并将前三个选项卡保留为空。以下是我的代码片段:

function createTabPanel(config) {
    return new Ext.Panel(Ext.apply({
        region: 'center',
        dockedItems: [
                dateToolbar,
                saveToolbar
        ]
    }, config));
};

var tabPanel = createTabPanel({
});

function createTabContainer(config) {
    return new Ext.Container(Ext.apply({
        height: 500,
        layout: 'border',
        items: tabPanel
    }, config));
};

var tab1Container = createTabContainer({
});

var tab2Container = createTabContainer({
});

var tab3Container = createTabContainer({
});

var tab4Container = createTabContainer({
});

var tabs = new Ext.tab.Panel ({    region: 'center',
title: 'Title:',
activeTab: 0,      // First tab active by default
bodyStyle: 'padding: 5px',
items: [
    {
        title: 'tab1',
        items: tab1container
    },
    {
        title: 'tab2',
        items: tab2container
    },
    {
        title: 'tab3',
        items: tab3container
    },
    {
        title: 'tab4',
        items: tab4container
    }
]
})


displayPanel = new Ext.Panel({
    renderTo : 'box_main',
    border: false,
    items: tabs
});
我相信每次我重用容器时,我都必须创建一个类并实例化一个新对象,但是我很难让它正常工作。任何帮助都很好,谢谢


编辑:添加了我的容器和选项卡面板。删除了id,但没有修复它。”“日期工具栏”和“保存工具栏”是两个带有组合框和按钮的工具栏。

您需要显示选项卡容器。但是它可能是id属性-删除它。

您需要显示您的tabcontainer。但是它可能是id属性-删除它。

您有一个
tabPanel
的实例。每个组件实例都可以有一个父容器。您应该修改
createTabContainer
函数,如下所示:

function createTabContainer(config) {
    return new Ext.Container(Ext.apply({
        height: 500,
        layout: 'border',
        items: createTabPanel({})
    }, config));
};

您有一个
tabPanel
的实例。每个组件实例都可以有一个父容器。您应该修改
createTabContainer
函数,如下所示:

function createTabContainer(config) {
    return new Ext.Container(Ext.apply({
        height: 500,
        layout: 'border',
        items: createTabPanel({})
    }, config));
};

在上面编辑,删除id并不能修复它。对我有效-一些语法清理,也改变了添加最后一个面板的方式。在上面编辑,删除id并不能修复它。对我有效-一些语法清理,也改变了添加最后一个面板的方式。是的,谢谢!这正是我想要的。是的,谢谢!这正是我要找的。