1. #1

    Default Docked tabBar Button not displaying as expected

    Docked tabBar Button not displaying as expected


    Hi,

    We're having some problems with a docked refresh button that we've created not displaying properly.

    The button is showing in the correct location, at the correct size and is functioning but for some reason it doesn't want to display the refresh icon for us and is displaying as pale grey.

    Like this:


    We've used a method similar to what is shown in the geotweets app. We create a reference to the tabBar we want to work with, then addDocked to apply the button.

    Here's the tabPanel that we're working with:


    Code:
    // APP PANEL          
              
              app_panel = new Ext.TabPanel({
                fullscreen: true,
                animation: 'slide',
                tabBar: 
                {
                    dock: 'bottom',
                    layout: 
                    {
                        pack: 'left'
                    }
                },
                centered: true,
                items: [bookings, clients, more]
              });
    Here is our attempt to dock the button to the tabBar:

    Code:
           var tabBar = app_panel.getTabBar();
            tabBar.addDocked({
                xtype: 'button',
                ui: 'mask',
                iconCls: 'refresh',
                dock: 'right',
                stretch: false,
                align: 'center',
                handler: refresh
            });
    Thanks for any help you can offer.

  2. #2

    Default


    Got it partly fixed.

    Adding:
    iconMask: true,

    To the addDocked statement has made it now display the icon correcly.

    Now I just need to stop it from showing as a grey icon (and adjust the button height a bit).

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
    pompair is on a distinguished road

      0  

    Default My button alignment is off too

    My button alignment is off too


    I also have problems with button alignment within a tabbar.
    If I add it like this:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
    
    		var panel, timeline, mapPanel;        
    
    		timeline = {
    			title: "Timeline",
    			html: "a list of local twits"
    		}
    
    		mapPanel = {
    			title: "Map",
    			html: "map area"
    		}
    
    		panel = new Ext.TabPanel(
    		{
    			fullscreen: true,
    			animation: 'slide',
    			tabBar:
    			{
    				dock: 'top',
    			    layout: 
    			    {
    			    	pack: 'left'
    			    }
    			},
    			centered: true,
    			items: [timeline, mapPanel]
    		});
    		
    		var tabBar = panel.getTabBar();
    		tabBar.addDocked({
    			dock: 'right',
    			xtype: 'button',
    			dock: 'right',
    			ui: 'dark',
                iconCls: 'refresh',
    			stretch: true,
    			align: 'center',
    			iconMask: true
    		});
        }
    });
    It will work ok and align nicely, but if I add it with ui-property 'plain' then the button will be too much towards the top (too high). Anyone have similar issue? What's the fix

    pom

Similar Threads

  1. Replies: 10
    Last Post: 21 Aug 2013, 2:06 PM
  2. Slide-in Toolbar/Tabbar - not working as expected...
    By sandor in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 16 Oct 2010, 7:20 AM
  3. Action button duplicates function of tabbar button
    By thebestusername in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 7 Jul 2010, 10:18 AM
  4. Form in Window not displaying as expected
    By BlueCamel in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 1 Oct 2008, 8:57 AM

Thread Participants: 1

Tags for this Thread