Extjs在tabpanel中动态切换标签位置

Question

我有tabpanel：

{
    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()方法从现有面板获取配置对象。