Results 1 to 5 of 5

Thread: TabPanel toolbar icon positioning in PR3

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    419

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Simple test case?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    419

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    419

    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
  •