Results 1 to 5 of 5

Thread: TabPanel toolbar icon positioning in PR3

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default TabPanel toolbar icon positioning in PR3

    I have noticed that since switching to PR3 the positioning of icons for tabs on my tabPanel are now aligned to the left and not centered as they used to be in PR2.

    I scanned the release notes to see if there are any new config params but couldnt spot anything, what do I need to do to get the icons centered once again?

    Thanks

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    Simple test case?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    Here you go:

    Code:
    Ext.define('PinpointersTouch.view.MainView', {
        extend: 'Ext.TabPanel',
        xtype: 'mainview',
        requires: [
            'PinpointersTouch.view.UnitList',
            'PinpointersTouch.view.GMap'
        ],
    
    
        config: {
    		//_loginWin: null,
            fullscreen: true,
    		tabBarPosition: 'bottom',
    		 layout: {
            //type: 'card',
    			animation: {
    				type: 'fade'
    			}
    		},
    		items: [
    			{
    				title: 'Home',
    				iconCls: 'home',
    				html: [
    					'<h1>Welcome to Pinpointers Touch</h1>'
    				].join("")
    			}, {
    				xtype: 'unitslist',
    				title: 'Locations',
    				iconCls: 'locate',
    				
    
    
    			}, {
    				xtype: 'gmap',
    				title: 'Map',
    				iconCls: 'maps',
    				
    
    
    			},{
    			    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light',
                    defaults: {
                        iconMask: true
                    },
                    items: [
                        { xtype: 'spacer' },
                        { iconCls: 'refresh', itemId: 'btnRefresh' },
                        { iconCls: 'user', itemId: 'btnUserLogout' },
                        { iconCls: 'settings' }
                    ]
    			}
    		]
        }
    });

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    You mean the tabs themselves centered in the tab bar?

    Code:
    var tabpanel = Ext.create('Ext.tab.Panel', {
        fullscreen : true,
        tabBar     : {
            docked : 'bottom',
            layout : {
                pack : 'center'
            }
        },
        items      : [
            {
                title   : 'Tab One',
                tabProp : 'one'
            },
            {
                title   : 'Tab Two',
                tabProp : 'two'
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    Ahh! My bad, thanks for this all sorted now.

Posting Permissions

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