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

    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
    0
    tanjuGMX is on a distinguished road

      0  

    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:

    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar