How to make vertical tabbar on landscape orientaion in sencha touch2

[Rameshlamani]

I have a horizontal tabbar at bottom.I need to change bootom horizontal tabbar to vertical tabbar in landscape orientation. I have gone many articles but they are explained only for bottom and top tabbar position.i didn't not got about vertical tabbar position in landscape orientation. Is it possible to achieve in sencha touch2?. Any one can tell me how to acieve this one .

[jerome76]

You can acheive it by using CSS
http://www.sencha.com/forum/showthread.php?236743-SideBar&p=871453#post871453

thread: http://www.sencha.com/forum/showthread.php?236743-SideBar&p=871453

It is essentially what you want. If you don't want to rotate the text, just remove that from the css and just make the tabs wider.

[mitchellsimoens]

Ext.Viewport.add(
    new Ext.tab.Panel({
        tabBar : {
            docked : 'right',
            width  : '5em'
        },
        items  : [
            {
                title : 'One',
                html  : 'One'
            },
            {
                title : 'Two',
                html  : 'Two'
            }
        ]
    })
);

With some CSS love to make the buttons look like tabs.

[Rameshlamani]

Hi, Thanks to both of you. it is working fine but there is one issue. initially in MainTabbarView i have set tab-bar docked bottom. in controller based on orientations i have set tab-bar docked positions, those conditions i have given in below controller code. tab-bar and its items are coming fine during portrait orientation, in landscape orientation tab-bar is coming at right it is nice but tab-bar item are coming horizontal and also not able to see the icons of the items(See in below attached image within red box). i need to show these tab bar items in vertical order in landscape orientation. below i have given view code, controller code, styles and images. Tell me how to achieve this one.

View Code:

Ext.define("SLS.BRND.WEB.view.MainTabbarView", {
    extend: 'Ext.tab.Panel',
    xtype: 'MainTabbarView',
    id:'mainTabbarprofile',
    config: {  
        tabBar: {
            docked: 'bottom',
            width: '5em',            
            layout: {
                        pack: 'center',
                        align: 'center'
                    }
        },
        items: [            
            {
                xclass: 'SLS.BRND.WEB.view.View1'
            },
            {
                xclass: 'SLS.BRND.WEB.view.View2'               
            }, 
            {
                xclass: 'SLS.BRND.WEB.view.View3'
            },
            {
                xclass: 'SLS.BRND.WEB.view.View4'               
            } 
          ]
    }
});

Controller Code:

Ext.define("SLS.BRND.WEB.controller.ApartmentController", {
    extend: "Ext.app.Controller",
    requires: ['Ext.data.proxy.JsonP'],
    config: {
        refs: {
            mainTabbarView: "MainTabbarView",          
            viewport: 'viewport'
        },
    control: {           
            viewport: {
                orientationchange: 'handleOrientationChange'
            }
        },
    handleOrientationChange: function (viewport, orientation, width, height) {
        var realOrientation = Ext.Viewport.determineOrientation();        
        var tabbarPosition = Ext.getCmp('mainTabbarprofile');      
        if (realOrientation == 'portrait') {            
            tabbarPosition.setTabBar({ docked: 'bottom',
                width: '5em'
            });
        }
        else if (realOrientation == 'landscape') {           
            tabbarPosition.setTabBar({ docked: 'right',
                width: '5em'
            });
        }
    }
});

Styles:

.x-tabbar.x-docked-bottom .x-tab .x-button-icon {
    -webkit-mask-size: 9em;
    width: 5em;
    height: 6em;
    position: relative;
}
.x-tabbar.x-docked-bottom {
    height: 5em;
}
.x-tabbar.x-docked-right .x-tab {
  color: whiteSmoke;
  text-shadow: black 0.1em 0.1em;
  width: 1.2em; 
  height: 2em;
  background-image: -webkit-linear-gradient(#ffe6b7, ffefd0 20%, #fff8ea);
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) -0.1em -0.1em 0.2em;
}
.x-tabbar.x-docked-right .x-tab-active {
  background-image: -webkit-linear-gradient(#fff8ea, #ffefd0 20%, #ffe6b7);
  color: white!important;
  text-shadow: none !important;
}

[jerome76]

Can you provide a demo? I understand if you have some privacy issues, but it would help (even if you could send it in a private message).

I have had that problem when I first started playing with the CSS to get it working, but it was a while ago and I can't remember how I got around it. In the meantime, I will look at my code and take away properties to see if I can get it to the point of how yours looks.

[zonaib]

this problem is solved
then can anyone of effected person post the code for my help