Results 1 to 10 of 10

Thread: Tab Panel items are NOT aligned center

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    35

    Default Tab Panel items are NOT aligned center

    Dears,

    I use this code to create my panel:

    Code:
    Ext.application({    name: 'MyApp',    launch: function() {        var position = new google.maps.LatLng(37.44885,-122.158592);        infowindow = new google.maps.InfoWindow({                content: 'Sencha Touch HQ'            });                    mapdemo = new Ext.Map({            mapOptions : {                center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran                zoom : 12,                mapTypeId : google.maps.MapTypeId.ROADMAP,                navigationControl: true,                navigationControlOptions: {                        style: google.maps.NavigationControlStyle.DEFAULT                    }            },            listeners : {                maprender : function(comp, map){                    var marker = new google.maps.Marker({                                     position: position,                                     title : 'Sencha HQ',                                     map: map                                });                                google.maps.event.addListener(marker, 'click', function() {                                     infowindow.open(map, marker);                                });                    setTimeout( function(){ map.panTo (position); } , 1000);                }            }        });                           tabpanel = Ext.create("Ext.tab.Panel", {            xtype:'tabpanel',            id: 'tabpanel',                        fullscreen: true,            tabBarPosition: 'bottom',            items: [                {                    title: 'Home',                    iconCls: 'MyHome',                    scroll: 'vertical',                    html: [ "My HTML 1"    ],                     dockedItems: [{                        xtype: "toolbar",                        docked: 'top',                        items: [                             {                                xtype: "spacer",                             },                            {                                xtype: "button",                                 text: "Refresh",                                 handler: function () {                                     // function                                }                                                            }                        ]                    }]                                            },                               {                    xtype: 'list',                    title: 'Snapshot',                    iconCls: 'Snapshot',                    itemTpl: "<b>{title}:</b> {desc}",                    store: {                        fields: ['title', 'desc'],                        data: [                            {title: 'Name', desc: "Sencha Name"},                            {title: 'Email', desc: "Sencha Email"},                            {title: 'Mobile 1', desc: "Sencha Mobile 1"},                            {title: 'Mobile 2', desc: "Sencha Mobile 2"}                        ]                    }                },                {                    title: 'History',                    iconCls: 'History',                    html: [ "My HTML 2" ].join("")                },                  {                    id: 'ViolationsTab',                    title: 'Violations',                    iconCls: 'Violations',                    scroll: 'vertical',                    badgeText: "5",                    html: [ "<div id='TblContainerV'>My HTML 3</div>" ],                     dockedItems: [{                        xtype: "toolbar",                        docked: 'top',                        items: [                             {                                xtype: "spacer",                             },                            {                                xtype: "button",                                 text: "Refresh",                                 handler: function () {                                     //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);                                }                                                            }                        ]                    }]                                            },                                {                    title: 'Map',                    iconCls: 'Map',                    layout: 'fit',                                        items: [mapdemo],                    dockedItems: [{                        xtype: "toolbar",                        docked: 'top',                        items: [                             {                                xtype: "spacer",                             },                            {                                xtype: "button",                                 text: "Refresh",                                 handler: function () {                                     //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);                                    //initialize();                                }                                                            }                        ]                    }]                }                                                            ]        }).setActiveItem(0);         }    });
    Look at the snapshot attached, the items are aligned LEFT, I need them to be centered.
    Any help?

    Regards,
    Attached Images Attached Images

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    786
    Answers
    7

    Default

    Your code's formatting is pretty messed up/unreadable.

    But maybe you need to define something like this in your TabPanel:

    Code:
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                }
            }

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    35

    Default

    this this the code again:

    Code:
    Ext.application({
        name: 'MyApp',
        launch: function() {
    
    
    
    
            var position = new google.maps.LatLng(37.44885,-122.158592);
            infowindow = new google.maps.InfoWindow({
                    content: 'Sencha Touch HQ'
                });
                
            mapdemo = new Ext.Map({
                mapOptions : {
                    center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran
                    zoom : 12,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.DEFAULT
                        }
                },
    
    
    
    
                listeners : {
                    maprender : function(comp, map){
                        var marker = new google.maps.Marker({
                                         position: position,
                                         title : 'Sencha HQ',
                                         map: map
                                    });
    
    
    
    
                                    google.maps.event.addListener(marker, 'click', function() {
                                         infowindow.open(map, marker);
                                    });
                        setTimeout( function(){ map.panTo (position); } , 1000);
                    }
                }
            });
                       
            tabpanel = Ext.create("Ext.tab.Panel", {
                xtype:'tabpanel',
                id: 'tabpanel',            
                fullscreen: true,
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'Home',
                        iconCls: 'MyHome',
                        scroll: 'vertical',
                        html: [ "My HTML 1"    ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        // function
                                    }                                
                                }
                            ]
                        }]                            
                    },               
                    {
                        xtype: 'list',
                        title: 'Snapshot',
                        iconCls: 'Snapshot',
                        itemTpl: "<b>{title}:</b> {desc}",
                        store: {
                            fields: ['title', 'desc'],
                            data: [
                                {title: 'Name', desc: "Sencha Name"},
                                {title: 'Email', desc: "Sencha Email"},
                                {title: 'Mobile 1', desc: "Sencha Mobile 1"},
                                {title: 'Mobile 2', desc: "Sencha Mobile 2"}
                            ]
                        }
                    },
                    {
                        title: 'History',
                        iconCls: 'History',
                        html: [ "My HTML 2" ].join("")
                    },  
                    {
                        id: 'ViolationsTab',
                        title: 'Violations',
                        iconCls: 'Violations',
                        scroll: 'vertical',
                        badgeText: "5",
                        html: [ "<div id='TblContainerV'>My HTML 3</div>" ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                    }                                
                                }
                            ]
                        }]                            
                    },                
                    {
                        title: 'Map',
                        iconCls: 'Map',
                        layout: 'fit',
                        
                        items: [mapdemo],
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                        //initialize();
                                    }                                
                                }
                            ]
                        }]
                    }                                                
                ]
            }).setActiveItem(0);     
        }
        
        
    });
    And your suggestions does NOT work.
    Please help.

    Regards,

  4. #4
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93

    Default

    Are you using PR4? It works for me in PR4:

    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'one'
                    },
                    {
                        title: 'two'
                    }
                ]
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    35

    Default

    Hi dear,

    Just Update to PR4 but getting same result.
    Any more suggestions?

    Regards,

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    18
    Answers
    2

    Default

    I did it in the same way for PR3 in the config of the panel where the tab bar is added:

    Code:
        config: {
            ....
            tabBar: {
                 layout: {
                    type : 'hbox',
                    align: 'middle',
                    pack : 'center'
                 }
            },
        }
    Quote Originally Posted by Steffen Hiller View Post
    Your code's formatting is pretty messed up/unreadable.

    But maybe you need to define something like this in your TabPanel:

    Code:
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                }
            }

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    35

    Default

    Dears,

    Thanks for you support.
    Still facing same problem, no suggestion works for me.
    Also, I backed to PR3 because many problems appeared when update to PR4.

    Any other suggestions? What I'm doing wrong?

    Regards,

  8. #8

    Default Re non center alignment

    Not sure if this is the correct way to do so but using nested containers is how I achieved center alignment. On the tab there was a container with layout vbox and within that, another container layout hbox and then my fields etc inside the hbox container. if the hbox container has pack and align as center everything in that container is centered

  9. #9
    Sencha User
    Join Date
    Jun 2014
    Posts
    4

    Default

    Work perfectly. Thanks for your help !

  10. #10
    Sencha User
    Join Date
    Jun 2014
    Posts
    4

    Default

    Quote Originally Posted by Steffen Hiller View Post
    Your code's formatting is pretty messed up/unreadable.

    But maybe you need to define something like this in your TabPanel:

    Code:
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                }
            }
    Works perfectly ! Thanks for your help !

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •