1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Post Custom Image in Tab bar

    Custom Image in Tab bar


    Hi,

    I need to fit the custom image in tab bar, i was going through the video http://vimeo.com/17879651 but here they are explain about pick the image from "pictos" and change the $base-color and $base-gradient etc.,

    But i have a custom image which i need to fit into tab bar. Please find the attached image("tab-bar-icons.jpg") for the tab bar icons and also hi-lighted image is not actual. I am herewith attached the actual icon("asup.png") also.

    Please help.

    Regards,
    Murali
    Attached Images

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Naga is on a distinguished road

      0  

    Default


    hai,

    You just define your image in your .html file as
    Code:
    .image{
    
    -webkit-mask-image:url('/images/home_graphic.png');}
    and refer that image using iconCls in your tabpanel.

    Code:
    iconCls: 'image',

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Default


    Naga, Thanks for replying...

    Actually i cannot directly modify the CSS file because it is generated by SASS. The "-web-mask-image" code is generated something like below...
    Code:
    .x-tab img.add, .x-button img.x-icon-mask.add {
      -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABqUlEQVRoBe2awWnDUBBE843B4NxcQSAFOC4lJeTkoxtJDykgvRhcgCFNJCFgIs+ChEHSJX93YT6ZD4ssmR3NztNFH5Wu6+6iVynlEZpbp+4J3s5OjWm7DRxZuMMCdUB9oyzNmrJe01hEejMtM5exIh6bCI3JbFkDT27EckEDs5DI8iHCWcmy6IowC4ksHyKclSyLrgizkMjyIcJZybLoijALiSwfIpyVLItuOGFso/xiuEvAgJdeK0DqJrHEhtsTTh9ul9y/ChR2KE+Y1ruDt2ccI7d6PszcK+oFFblWELt3Cn6i/8epMW5/W+LKGrUZ/0NwboF5QxuPsfY8dmOxJs41cBOYHCZF2BFeE60i3AQmh0kRdoTXRKsIN4HJYVKEHeE10frvCNvr4RH1HojH3rGHr3hqA7VdkxPKvuKJ3AA4hn7BM3xxA5N71Fdv1gz/tax3P+hFHmsJwM/8wraMadqOh5GuXda76rVqNWb7wgeevQvRRQ1MBCPFiginxEokKsJEMFKsiHBKrESiIkwEI8WKCKfESiQqwkQwUqyIcEqsRKIiTAQjxcoVrP83/9czD9EAAAAASUVORK5CYII=');
    }
    I tried the way you said in my CSS file, but it dint work for me

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Default


    It is base64 converted code..

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Naga is on a distinguished road

      0  

    Default


    hai,

    Am not saying you to modify in css file , You just define your image in .html file or in css file at last and just call that image using iconCls.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Default


    Naga, I tried it in the same way, but somehow that dint work for me....

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Naga is on a distinguished road

      0  

    Default


    hai,
    Otherwise you can just specify your path in icon instead of using iconCls like

    Code:
    icon: '/public/images/pointer.png',
    it's working fine for me.

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Default


    xtype:'asups',
    id: 'asuppagetab',
    //iconCls: 'asup',
    icon :'resources/themes/images/default/pictos/battery_full.png',
    iconMask: false

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    0
    murali3 is on a distinguished road

      0  

    Post


    Still no luck...

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Naga is on a distinguished road

      0  

    Default


    Quote Originally Posted by murali3 View Post
    xtype:'asups',
    id: 'asuppagetab',
    //iconCls: 'asup',
    icon :'resources/themes/images/default/pictos/battery_full.png',
    iconMask: false
    hai,

    what is asup here. Add '/' before resources.

    icon :'/resources/themes/images/default/pictos/battery_full.png',

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