Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Exclamation Theming: button icon style hinders with iconCls style

    Theming: button icon style hinders with iconCls style


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.0.7
    Browser versions tested against:
    • IE8-9
    • FF8
    • Chrome 16.0.912.75 m
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • We use Compass spriting to generate a sprite map, and icon classes that reference the map. Then we use these icon classes in a toolbar menu with groups. However, we noticed that the icons are not displayed correctly.
    Steps to reproduce the problem:
    • Generate sprite map with Compass.
    • Use generated icon classes above in our js code
    The result that was expected:
    • Here's what the menu should look like:
    menu-bug-expected.png

    The result that occurs instead:
    • icon class styles are not applied because there exist Ext styles with more specificity:
    menu-bug.png

    Test Case:
    See Compass spriting tutorial for spriting details. In resources/images, create a dir with some png icons in it, then use the files below.
    sprites.scss:
    Code:
    @import '<png dir name>/*.png';
    @include all-<png dir name>-sprites;
    app.js:
    Code:
    Ext.application({
        name : 'TestApp',
    
    
    
    
        appFolder : 'app',
    
    
    
    
        launch : function() {
            console.log('launching');
            Ext.create('Ext.container.Viewport', {
                layout : 'fit',
                items : [ {
                    title : 'Panel with Menu',
                    tbar: [ { 
                        id: 'align',
                        text: 'align',
                        tooltip: 'Alignment',
                        menu: {
                            id: 'reading-menu',
                            items: [
                                {
                                    id: 'alignLeft',
                                    iconCls: '<choose an icon class>',
                                    text: 'left',
                                    checked: false,
                                    group: 'rp-group'
                                },
                                {
                                    id: 'alignCenter',
                                    iconCls: '<choose an icon class>',
                                    text: 'center',
                                    checked: true,
                                    group: 'rp-group'
                                },
                                {
                                    id: 'alignRight',
                                    iconCls: '<choose an icon class>',
                                    text: 'right',
                                    checked: false,
                                    group: 'rp-group'
                                },
                                '-',
                                {
                                    id: 'alignTop',
                                    iconCls: '<choose an icon class>',
                                    text: 'top',
                                    checked: false,
                                    group: 'vrp-group'
                                },
                                {
                                    id: 'alignMiddle',
                                    iconCls: '<choose an icon class>',
                                    text: 'middle',
                                    checked: true,
                                    group: 'vrp-group'
                                },
                                {
                                    id: 'alignBottom',
                                    iconCls: '<choose an icon class>',
                                    text: 'bottom',
                                    checked: false,
                                    group: 'vrp-group'
                                }
                            ]
                        }
                    } ]
                }
                ]
            });
        }
    });
    Include generated sprites.css in the app html file.

    HELPFUL INFORMATION
    These Ext style masks our icon styles because they have more specificity:
    Code:
    /* line 91, ../../../lib/ext-4.0.7/resources/themes/stylesheets/ext4/default/widgets/_menu.scss */
    .x-menu-item-checked .x-menu-item-icon {
      background-image: url('../images/extjs/menu/checked.gif'); }
    ...
    /* line 100, ../../../lib/ext-4.0.7/resources/themes/stylesheets/ext4/default/widgets/_menu.scss */
    .x-menu-item-unchecked .x-menu-item-icon {
      background-image: url('../images/extjs/menu/unchecked.gif'); }

    Screenshot or Video:
    • attached
    Debugging already done:
    • Code is in widgets/_menu.scss
    Possible fix:
    • Instead of 2-class styles above, use only 1-class styles for the icons
    • Workaround: currently we can beat the specificity by defining an id for the menu, then styling w/ id. Would be great if we can do this with a 'cls' or 'bodyCls' attr instead for a more reusable solution.
    Additional CSS used:
    • default ext-all.css
    • sprites.scss above
    Operating System:
    • Win7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,937
    Vote Rating
    635
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I don't think this is a bug, the CSS is implemented as is, you're most certainly able to change it with a bit of tweaking. If you need to override the default checked behaviour then there's a little bit more work involved.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    I see. In that case, is it possible to add a cls or bodyCls property to the menu so we can specify it in the icon styles?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,937
    Vote Rating
    635
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Menu extends panel, so you can use all the usual things (componentCls, cls, bodyCls)
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    Thanks for the tip! I tried all of them on the menu, and looks like bodyCls and componentCls both apply, but cls didn't.

Thread Participants: 1

Tags for this Thread