ExtJs4.2中的垂直标签面板

Question

是否可以使用现有的选项卡面板在ExtJs4.2中创建垂直选项卡面板。通过将选项卡条设置为“左”，该条将停靠在面板的左侧，但这不是我想要的。是否有可能一个接一个地垂直放置标签？

Answer 1

我相信您可以通过在选项卡面板上设置tabPosition:'left'来获得所需的结果。

我创建了一个用于演示的森查小提琴：

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

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

Answer 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;
  }
}

Answer 3

主要是将cls添加到tabpanel组件cls:'verticaltab‘

然后添加选项卡属性：

 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代码来工作。

如果对你来说很难的话，我会为你准备的。