문제

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?

도움이 되었습니까?

해결책

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'
            }]
        });

다른 팁

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

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 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top