Question

我目前正在使用extjs 4并且有一个大约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，没有解决它。 'dateToolbar'和'saveToolbar'是两个带有组合框和按钮的工具栏。

Answer 1

您有tabPanel的一个实例。每个组件实例都可以有一个父容器。您应该像这样修改createTabContainer函数：

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

Answer 2

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

Ext JS 4：每个标签中的相同容器

2 个答案: