2013-08-22 46 views
1

我有一个tabpanel:ExtJS的动态切换标签的位置在一个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?

回答

1

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