1. #1
    Sencha User
    Join Date
    Jul 2007
    Location
    London
    Posts
    25
    Vote Rating
    0
    mattbennett is on a distinguished road

      0  

    Exclamation Ext.Button iconCls gotcha

    Ext.Button iconCls gotcha


    Hello all,

    I was puzzled by the iconCls config option for Buttons. The following fails to work as I would expect:

    JS:
    Code:
    var b = new Ext.Button('test-button',{
    	iconCls:'an-icon',
    	text:'click on me!'
    })
    CSS:
    Code:
    .an-icon {
    	background-image: url(../icons/someicon.png);
    	background-repeat: no-repeat;
    }
    In fact, you *must* specify the class on button:

    Code:
    button.an-icon {
    	background-image: url(../icons/someicon.png);
    	background-repeat: no-repeat;
    }
    Hope that saves someone some time,
    Matt.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This is not a bug, it's a feature of CSS. selector specificity.

    The standard: http://www.w3.org/TR/CSS21/cascade.html

    An article: http://cmsproducer.com/css-specificity-inline-important

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Location
    London
    Posts
    25
    Vote Rating
    0
    mattbennett is on a distinguished road

      0  

    Default


    Thanks Animal - that explains a lot.

    Matt.

  4. #4
    Sencha User Lobos's Avatar
    Join Date
    Oct 2007
    Location
    Sao Paulo, Brazil
    Posts
    461
    Vote Rating
    -1
    Lobos is an unknown quantity at this point

      0  

    Default


    Thanks Matt, this got me!

    -Lobos

  5. #5
    Ext User
    Join Date
    Jan 2008
    Location
    Austin, TX
    Posts
    2
    Vote Rating
    0
    Ebezester is on a distinguished road

      0  

    Default Doesn't work for 'action'

    Doesn't work for 'action'


    I have a related issue. When using iconCls on an action, the button specifier must also be used...but then you cannot have an action in both a button and a menu item unless you want to duplicate the class. Once with "button" at the beginning, once without. I cannot figure out why this works in the ext example "actions" and not in my site. Anyone else run into this problem?

    CSS:
    Code:
    .sprite-forward { 
    background: url(Images/App/sprites.gif) no-repeat top left; 
    background-position: 0 -76px }
    JS:
    Code:
    new Ext.Action({
                        iconCls: "sprite-forward",
                        text:"View Results",
                        id: "view"
                    })
    When the action is used for a toolbar action, no icon shows up
    When the same action on the same page is used in a context menu as a menu item, the icon shows up nicely.
    Last edited by Ebezester; 9 Jan 2008 at 2:30 PM. Reason: Added more details

  6. #6
    Ext User LoneTiger's Avatar
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    LoneTiger is on a distinguished road

      0  

    Default iconCls on Action

    iconCls on Action


    Ebezester, I had the problem when icon was not showing for Ext.Action. When I added the "button." it works perfectly.

    Code:
    button.icon_new {
    	background-image: url(resources/ext/resources/images/default/dd/drop-add.gif);
    }
    Have you tried using FireBug in FF? If you inspect the element and look to the right where assigned CSS properties are and navigate to the class you are using for icon - "button.sprite-forward" in your case. When you hover over the path FireBug should be able to load the icon and show it. If it doesn't show the path might be wrong.

    Hope this helps.

  7. #7
    Ext User
    Join Date
    Apr 2007
    Posts
    6
    Vote Rating
    0
    spudnyk is on a distinguished road

      0  

    Default I also had the same problem

    I also had the same problem


    To share the same class use the css !important rule. This worked for me

    Code:
    .icon_new {
    	background-image: url(resources/ext/resources/images/default/dd/drop-add.gif) !important;
    }

  8. #8
    Sencha User
    Join Date
    Aug 2008
    Posts
    28
    Vote Rating
    0
    njw is on a distinguished road

      0  

    Question Me too

    Me too


    Quote Originally Posted by Ebezester View Post
    I have a related issue. When using iconCls on an action, the button specifier must also be used...but then you cannot have an action in both a button and a menu item unless you want to duplicate the class. Once with "button" at the beginning, once without. I cannot figure out why this works in the ext example "actions" and not in my site. Anyone else run into this problem?

    CSS:
    Code:
    .sprite-forward { 
    background: url(Images/App/sprites.gif) no-repeat top left; 
    background-position: 0 -76px }
    JS:
    Code:
    new Ext.Action({
                        iconCls: "sprite-forward",
                        text:"View Results",
                        id: "view"
                    })
    When the action is used for a toolbar action, no icon shows up
    When the same action on the same page is used in a context menu as a menu item, the icon shows up nicely.
    I also have the same behaviour. Adding the button class does nothing. Interestingly, applying the 'iconCls' makes space for the icon, but the image doesnt appear. If I add the icon directly to the action button using 'icon' its fine. The CSS is valid and functioning; just not when being applied via iconCls to a button/action within a tab panel.

    Im using build 2.2.

    Any ideas?

  9. #9
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    i'm using Ext.Buttons from 2.2 with the iconCls config, and my icons are appearing.

    are you absolutely sure your css image paths are correct?
    (a long shot in the dark, but when updating, did you also update your images and css?)

  10. #10
    Ext User
    Join Date
    Aug 2008
    Posts
    13
    Vote Rating
    0
    boulay is on a distinguished road

      0  

    Default


    I had a related question about icons. I can see the icon within the button, no problem. But what do I do to get the icon to replace the button (so that the button becomes an imagebutton)?

    Thanks a lot!