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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1382
      0  

    Default

    Simple test case?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1382
      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
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    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
  •