1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    6
    Vote Rating
    0
    anishkumar is on a distinguished road

      0  

    Default Adding Custom icon in the tab bar

    Hello,I am trying to add custom icon in the toolbar.but it seems not working.i tried background-image instead of -webkit-mask-box-image.but this doesn't helps me....any ideas????

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Location
    Paris, France
    Posts
    257
    Vote Rating
    0
    gabrielstuff is on a distinguished road

      0  

    Default

    Yes, show us your CSS, also take a quick look in the search result :

    http://www.sencha.com/forum/showthre...highlight=icon
    http://www.sencha.com/forum/showthre...highlight=icon

    Personnaly I do this :
    1. adding class to myPanel:
    Code:
        iconCls: 'icnHom',
    Then in the CSS :
    Code:
    .icnHom {
    -webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGg..../LHEKZXOUWaBm2Pk95DylTf);}

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default

    Hello Gabriel,

    How do I use the standard icons? If I do something like this (dockedItems of a panel):

    Code:
    items: [{
       iconCls: 'info',						
       title: 'Info'						
    }]
    I dont get the standard info-icon. Do I have to add the class to my custom CSS as you described? If yes, how do I become the url tag?

  4. #4
    Ext User
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    1
    tanjuGMX is on a distinguished road

      1  

    Default

    Quote Originally Posted by peterkuli View Post
    how do I become the url tag?
    Inside the "URL tag" is a base64 encoded image. You can go to
    http://www.greywyvern.com/code/php/binary2base64

    Just enter the URL where you store the image and it translates it to base64

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    ereztison is on a distinguished road

      0  

    Default I customized tabbar icons on Sencha Touch 2 using:

    in the .js file:

    Code:
    {
                xtype: 'tabbar',
                id: 'bottom-tab-bar',
                ui: 'dark',
                docked: 'bottom',
                layout: {
                    pack: 'center',
                    align: 'center'
                },
                items: [{
            id: 'contacts-tab-button',
                    cls: 'selected',
                    labelCls: 'tab-button-label',
                    title: 'Contacts',
        },
    ...and so on with the other tabs
    }
    and in the css file:

    Code:
    #bottom-tab-bar {
        border-top: none;
        background-image: url('/sencha/resources/images/bottombar_background.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-color: transparent;
    }
    
    
    /* control the active state of the child tabs */
    #bottom-tab-bar .x-tab-normal {
        /* required for setting the image to our custom one */
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        background-size: 38px 38px;
        
        /* controls the label color */
        text-align: center;
        color: light-blue;
    }
    
    
    /* control the active state of the child tabs */
    #bottom-tab-bar .x-tab-active {
        /* required for hiding the selected state box */ 
        border: none;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    
    
    .tab-button-label {
        font-size: 0.5em;
        color: light-blue;
    }    
    
    
    #contacts-tab-button {
        background-image: url('/sencha/resources/images/bottombar_contacts_icon_normal.png');
    }
    
    
    #contacts-tab-button.selected {
        background-image: url('/sencha/resources/images/bottombar_contacts_icon_selected.png');
    }

Similar Threads

  1. Adding Custom Icon to TabBar
    By napsys in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 20 Sep 2010, 5:49 AM
  2. Ext JS 2.2.1 - Custom Tab Icon
    By mayura in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 23 Oct 2009, 4:21 AM
  3. adding custom button title bar
    By sawan in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 1 Jul 2009, 5:24 AM
  4. Adding custom buttons to a tree/grid panel's title bar.
    By shr1975 in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 5 Jun 2009, 2:10 PM
  5. Adding buttons on the TAB-bar ?
    By mraptor in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jan 2008, 5:58 PM

Thread Participants: 4

Tags for this Thread