1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    28
    Vote Rating
    0
    Larry Q is on a distinguished road

      0  

    Default using TabPanel button icons in a Toolbar?

    using TabPanel button icons in a Toolbar?


    I'd like to use the cool TabPanel button icons (download, favorites, etc) in an Ext.Toolbar of mine. Could someone let me if it's possible to set the cls property on the toolbar's buttons so this can happen? I've been experimenting but have had no luck.

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    There are multiple posts about this, but here's a basic idea of what you can do…

    Call a custom style sheet with an element like this:

    Code:
    .NewIcon {
    	-webkit-mask-box-image: url('../img/new_icon.png');
    }
    Then call that property when setting up the panels that reside in the TabPanel:

    Code:
    new Ext.Panel({
    	iconCls: 'NewIcon'
    });
    This will call your custom icon.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  3. #3
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
    Riaz is on a distinguished road

      0  

    Default


    Simple but useful. Thanks markwyner.

  4. #4
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Absolutely!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    28
    Vote Rating
    0
    Larry Q is on a distinguished road

      0  

    Default


    Thanks much Mark, I'll put this to good use.

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    77
    Vote Rating
    0
    riahut.com is on a distinguished road

      0  

    Default


    Actually it doesnt work for me, I followed sample code but no icon displayed, instead I have IMG tag appear with this content
    Code:
    <img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="NewIcon" id="ext-gen1023"/>
    What is wrong?

  7. #7
    Sencha User Decio's Avatar
    Join Date
    Apr 2012
    Location
    Brussels
    Posts
    2
    Vote Rating
    0
    Decio is on a distinguished road

      0  

    Default


    Are you using sass for you scss file?

Similar Threads

  1. How to create my own Toolbar Icons?
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 7 Jul 2011, 9:07 AM
  2. All Picto icons available on Toolbar?
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 26 Jan 2011, 1:47 PM
  3. TabPanel toolbar button
    By qooleot in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 5 Dec 2010, 12:19 PM
  4. Toolbar Icons not rendering
    By pinheiro.cc in forum Ext GWT: Discussion
    Replies: 9
    Last Post: 6 Apr 2010, 7:53 AM
  5. Toolbar button 16x16 icons chopped by 1px in FF
    By TDB in forum Ext GWT: Bugs (2.x)
    Replies: 0
    Last Post: 20 Jan 2010, 5:26 PM

Thread Participants: 4