PDA

View Full Version : How to make vertical tabbar on landscape orientaion in sencha touch2



Rameshlamani
17 Aug 2012, 9:33 AM
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
17 Aug 2012, 10:20 AM
You can acheive it by using CSS :)
http://www.sencha.com/forum/showthread.php?236743-SideBar&p=871453#post871453

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

(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
20 Aug 2012, 5:41 AM
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
21 Aug 2012, 2:36 AM
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
22 Aug 2012, 7:19 PM
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
26 Nov 2012, 4:46 AM
this problem is solved =D>
then can anyone of effected person post the code for my help ~o)

sanjay-patel
26 Aug 2013, 4:39 AM
I have same issue in tab panel. How did you fixed it?