vertical tab panel in ExtJs 4.2

Question

Is there a way a vertical tab panel can be created in ExtJs 4.2 using the existing tab panel. By setting the tab strip to 'left', the strip is docked to left of the panel but that's not what I wanted. Is it possible to have the tabs positioned one by one vertically?

Answer 1

I believe you can get the result you are looking for by setting tabPosition:'left' on the tab panel.

I've created a sencha fiddle for demonstration:

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

Hi guys I had the same problem.. down you have my simple solution (Sass and 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 file

.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

Main is to add cls to the tabpanel component cls:'verticaltab'

then add tabbar property:

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

And then just add

.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 file can be in theme folder structure.. I think it is not working on Safari but you can upgrade Sass code to work.

If it to hard for you I will prepare Sencha Fiddle :)

Answer 4

Just tack these onto the tabPanel

tabPosition: 'left',
tabRotation: 0

Example: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/#advanced-tabs

Sources:

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