1. #11
    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 believe that's not possible.

    p.s. please refrain from thread hijacking.
    post help requests in the 1.x / 2.x Help forums.

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

      0  

    Default


    Quote Originally Posted by mystix View Post
    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?)
    100% positive. I can use the URL from the CSS into a standard image element; I can also apply that CSS class to another html element. All works fine.

    I've noticed something else now! I have to apply both the iconCls and icon values otherwise it wont work. Applying iconCls moved the button text to the right, providing the space for the image (but not displaying the image). I can only get the image to appear by using 'icon'. Setting icon on its own wont work. Nor will setting iconCls on its own.

    If its not a bug in ExtJs, I suppose it could be a stylesheet overriding ext-all.css? But I've actually had ext-all overriding my other stylesheet?

    thanks,

  3. #13
    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 believe your stylesheet include order is reversed then -- you would normally include ext-all.css, followed by whatever custom stylesheet you have (which may / may not override ext's styles)

  4. #14
    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


    here's a drop-in test case which works fine for me.

    create a new html file in the 2.2 download's /examples folder, paste the following code in there:
    HTML Code:
    <html>
    <head>
    <title>Scratchpad</title>
    
    <link rel="stylesheet" href="../resources/css/ext-all.css">
    <style type="text/css">
        button.test-exclamation{background:transparent url(../resources/images/default/form/exclamation.gif) scroll no-repeat;}
    </style>
    
    <script src="../adapter/ext/ext-base.js"></script>
    <script src="../ext-all.js"></script>
    
    <script>
    Ext.onReady(function() {
        new Ext.Button({
            iconCls: 'test-exclamation',
            renderTo: document.body,
            text: 'Test'
        });
    });
    </script>
    
    </head>
    <body scroll="no">
    </body>
    </html>
    i did notice, however, if i specified the rule for test-exclamation as
    HTML Code:
    <style type="text/css">
       .test-exclamation{background:transparent url(../resources/images/default/form/exclamation.gif) scroll no-repeat;}
    </style>
    instead, then i'd encounter the problem you're seeing.
    i'm guessing the rule i've specified in my test case has a higher specificity which is required for the icon to be displayed correctly. HTH.

  5. #15
    Sencha User
    Join Date
    Feb 2008
    Posts
    15
    Vote Rating
    0
    Silver Paladin is on a distinguished road

      0  

    Post


    Quote Originally Posted by mystix View Post
    i did notice, however, if i specified the rule for test-exclamation as
    HTML Code:
    <style type="text/css">
       .test-exclamation{background:transparent url(../resources/images/default/form/exclamation.gif) scroll no-repeat;}
    </style>
    Try this?
    HTML Code:
    <style type="text/css">
       .test-exclamation{background-image: url(../resources/images/default/form/exclamation.gif) !important;}
    </style>
    I had the same issue and adding the !important to the end of my class fixed it up. The other css rules for background are already defined so you don't need to re-specify them, just put the background-image: rule in.

  6. #16
    Ext User
    Join Date
    Sep 2008
    Posts
    1
    Vote Rating
    0
    mafer is on a distinguished road

      0  

    Default problems with overcls

    problems with overcls


    I'm tryng to assign a class in the overcls config (button), but it doesnt work. It x-botton-over class overrides my class, and nothing happens. I want to change my background-image in the mouse over event.

    Help me!!

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

      0  

    Exclamation Ext 2.2.1 - still an issue :(

    Ext 2.2.1 - still an issue :(


    Hi guys, I'm back on this issue. To update you, I'm now running the latest ext (2.2.1).

    Quote Originally Posted by mystix View Post
    i believe your stylesheet include order is reversed then -- you would normally include ext-all.css, followed by whatever custom stylesheet you have (which may / may not override ext's styles)
    I've created a new test. It only has 2 style sheets, listed first is ext-all, and then a custom style sheet. This has only 1 class for an icon/button. The only attribute set is background-image.

    I'm still getting the same behaviour??

    Anyone have any more ideas?

    many thanks!

  8. #18
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    A lot of people aren't going to see this in 1.x bugs.

    Please create a new thread regarding this in 2.x Bugs with necessary details. Link back to this thread if relevant.