1. #1
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Center Tabs in TabBar

    Center Tabs in TabBar


    When my tabpanel starts up, the tabs are all aligned to the left along the bottom. I've tried messing with the CSS for a little while, but have been unable to center the contents. Anyone been successful with that?

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    35
    Vote Rating
    0
    realkevinroth is on a distinguished road

      0  

    Default


    The API does a pretty good job of documenting this. http://dev.sencha.com/deploy/touch/d...s=Ext.TabPanel


    Code:
    new Ext.TabPanel({
        fullscreen: true,
        ui        : 'dark',
        centered  : true,  //boolean, set to true to center tabs.
        items: [
            {
                title: 'Tab 1',
                html : '1',
                cls  : 'card1'
            },
            {
                title: 'Tab 2',
                html : '2',
                cls  : 'card2'
            },
            {
                title: 'Tab 3',
                html : '3',
                cls  : 'card3'
            }
        ]
    });

  3. #3
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Er

    Er


    This does not work (check it out)
    Code:
    <html> 
        <head> 
            <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css"> 
            <script type="text/javascript" src="sencha/sencha-touch.js"></script> 
    <script type="text/javascript">
    Ext.setup({
        onReady: function() {
            new Ext.TabPanel({
                renderTo:Ext.getBody(),
                fullscreen: true,
                ui        : 'dark',
                centered  : true,  //boolean, set to true to center tabs.
                items: [
                    {
                        title: 'Tab 1',
                        html : '1',
                        cls  : 'card1'
                    },
                    {
                        title: 'Tab 2',
                        html : '2',
                        cls  : 'card2'
                    },
                    {
                        title: 'Tab 3',
                        html : '3',
                        cls  : 'card3'
                    }
                ]
            });
        }
    });
    </script> 
    </head> 
    <body/> 
    </html>
    Also tried...
    Code:
            var cTabBar = new Ext.TabBar({centered:true,dock:'bottom'});
            new Ext.TabPanel({
                tabBar:cTabBar,
                fullscreen: true,
                ui        : 'dark',
                centered  : true,  //boolean, set to true to center tabs.
                items: [
                    {
                        title: 'Tab 1',
                        html : '1',
                        cls  : 'card1'
                    },
                    {
                        title: 'Tab 2',
                        html : '2',
                        cls  : 'card2'
                    },
                    {
                        title: 'Tab 3',
                        html : '3',
                        cls  : 'card3'
                    }
                ]
            });
    No good. So has anyone had success with this using CSS?

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    digil is on a distinguished road

      0  

    Default


    Give this a try. The key is that you have to specify the pack : center inside the layout inside the tabBar. I had to dig through the DOM and the source to find this, but it looks like it works.

    PHP Code:
    <html>
    <
    head>
        <
    link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
        <
    script type="text/javascript" src="js/sencha-touch-debug.js"></script>
        <script type="text/javascript">
            Ext.setup({
                onReady: function() {
                    new Ext.TabPanel({
                        renderTo:Ext.getBody(),
                        fullscreen: true,
                        ui        : 'dark',
                        tabBar : {
                            layout : {
                                pack : 'center'
                            }
                        },
                        items: [
                            {
                                title: 'Tab 1',
                                html : '1',
                                cls  : 'card1'
                            },
                            {
                                title: 'Tab 2',
                                html : '2',
                                cls  : 'card2'
                            },
                            {
                                title: 'Tab 3',
                                html : '3',
                                cls  : 'card3'
                            },
                            {
                                xtype : 'spacer'
                            }
                        ]
                    });
                }
            });
        </script>
    </head>
    <body/>
    </html> 

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    digil is on a distinguished road

      0  

    Default


    kevin, the API says: Center the Component. The component in this case is the entire TabPanel object, not the Tabs inside the TabBar inside the TabPanel.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    2
    MattCobb is on a distinguished road

      0  

    Post Setting the tabBar layout worked for me:

    Setting the tabBar layout worked for me:


    tabBar: { layout: { pack: 'center' } }

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Pakistan
    Posts
    222
    Vote Rating
    1
    umr.ashrf is on a distinguished road

      0  

    Default


    NOTE: Disregard this post. Mistakenly posted in Sencha Touch forum.

    Code:
    tabBar : {
        layout : {
            pack : 'center'
        }
    }
    doesn't work for me on ExtJS 4.1.1a GPL

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar