ExtJs 4.2 中的垂直选项卡面板答案

【问题标题】：vertical tab panel in ExtJs 4.2ExtJs 4.2 中的垂直选项卡面板
【发布时间】：2014-05-02 20:47:40
【问题描述】：

有没有一种方法可以使用现有的标签面板在 ExtJs 4.2 中创建垂直标签面板。通过将标签条设置为“左”，该条停靠在面板的左侧，但这不是我想要的。是否可以将选项卡垂直放置？

【问题讨论】：

【解决方案1】：

相信你可以通过在标签面板上设置tabPosition:'left'得到你想要的结果。

我创建了一个sencha fiddle 用于演示：

var panel = Ext.create('Ext.tab.Panel',{
            renderTo:Ext.getBody(),
            tabPosition:'left',
            height:400,
            width:1000,

            items:[{
                title:'Item 1'
            },{
                title:'Item 2'
            }]
        });

【讨论】：

谢谢。有没有办法让标签标题水平显示而不是垂直显示？
可能会有，但是我不知道怎么做。可能作为新问题发布？

【解决方案2】：

大家好，我遇到了同样的问题.. 下来你有我的简单解决方案（Sass 和 extjs）

Ext.define('Navigator.view.TestView', {
    requires: [
        'Ext.grid.*',
        'Ext.tab.*'
    ],
    extend: 'Ext.tab.Panel',
    alias: 'widget.testView',
    cls:'verticaltab',
    tabBar: {
        width: 340,
        minTabWidth: 330,
        maxTabWidth: 330,
        height:20,
        orientation: 'vertical'
    },
    tabPosition: 'left',

    plain: true,
    items:[
        {
            title:'first',
            html:'first'
        },
        {
            title:'second',
            html:'second'
        }
    ]
});

//Sass 文件

.verticaltab {    
  .x-tab-wrap{
    position: absolute;
    display: block;
    padding-left: 20px;
    transform: rotate(90deg);
  }

  .x-tab-button{
    position: absolute;
    display: block;
    padding-left: 0px;
    padding-top: 2px;
  }
}

【讨论】：

你能在jsfiddle 上提供演示代码吗？我花了很多天时间才找到它，看到你发布的答案符合我的要求。请帮助提供工作示例代码

【解决方案3】：

main是给tabpanel组件添加cls cls:'verticaltab'

然后添加tabbar属性：

 tabBar: {
    width: 340,
    minTabWidth: 330,
    maxTabWidth: 330,
    height:20,
    orientation: 'vertical'
},
tabPosition: 'left',

然后添加

.verticaltab {    
  .x-tab-wrap{
    position: absolute;
    display: block;
    padding-left: 20px;
    transform: rotate(90deg);
  }

  .x-tab-button{
    position: absolute;
    display: block;
    padding-left: 0px;
    padding-top: 2px;
  }
}

Sass 文件可以在主题文件夹结构中.. 我认为它不适用于 Safari，但您可以升级 Sass 代码以使其正常工作。

如果你觉得难，我会准备 Sencha Fiddle :)

【讨论】：

【解决方案4】：

只需将这些粘贴到 tabPanel 上

tabPosition: 'left',
tabRotation: 0

示例： https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/#advanced-tabs

来源：

https://docs.sencha.com/extjs/7.3.1/classic/Ext.tab.Panel.html#cfg-tabPosition https://docs.sencha.com/extjs/7.3.1/classic/Ext.tab.Panel.html#cfg-tabRotation

【讨论】：

欢迎来到 SO。尽管我们感谢您的回答，但如果它在其他答案之上提供额外的价值会更好。在这种情况下，您的答案不会提供额外的价值，因为 weekdev 已经发布了该解决方案。如果之前的答案对您有帮助，那么您应该在获得足够声誉后投票。