javascript - Extjs在tabpanel中动态切换tab位置

Question

我有标签面板：

{
    xtype: 'tabpanel',
    tabPosition: 'top', // it's default value
    items: [/*tabs*/]
}

还有一些改变布局的按钮：

{
    xtype: 'button',
    text: 'Change layout',
    handler: function (btn) {
        var layout = App.helper.Registry.get('layout');
        if (layout === this.getCurrentLayout()) {
            return;
        }
        if (layout === 'horizontal') {
            newContainer = this.down('container[cls~=split-horizontal]');//hbox laout
            oldContainer = this.down('container[cls~=split-vertical]');//vbox layout
            tabPanel.tabPosition = 'top';
        } else {
            newContainer = this.down('container[cls~=split-vertical]');
            oldContainer = this.down('container[cls~=split-horizontal]');
            tabPanel.tabPosition = 'bottom';
        }
        oldContainer.remove(somePanel, false);
        oldContainer.remove(tabPanel, false);

        newContainer.insert(0, somePanel);
        newContainer.insert(2, tabPanel);

        newContainer.show();
        oldContainer.hide();

    }

当我更改布局时，我还需要更改选项卡的位置。当然更改配置属性tabPosition没有效果。

如何动态切换 tabPosition？

Answer 1

恐怕tabpanel唯一的方法是销毁当前面板并从更改tabPosition设置的配置对象重新创建它。您可以使用cloneConfig()方法从现有面板中获取配置对象。