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