1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default How to make vertical tabbar on landscape orientaion in sencha touch2

    How to make vertical tabbar on landscape orientaion in sencha touch2


    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 .

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default Vertical tab-bar in landscape orientaion

    Vertical tab-bar in landscape orientaion


    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:

    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:
    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:
    Code:
    .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;
    }
    Attached Images

  5. #5
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    10
    Vote Rating
    0
    sanjay-patel is on a distinguished road

      0  

    Default landsape orientation

    landsape orientation


    I have same issue in tab panel. How did you fixed it?