Theming: button icon style hinders with iconCls style

**alicexyl** · 1 Feb 2012 3:12 PM

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

**evant** · 2 Feb 2012 10:04 AM

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.

**alicexyl** · 2 Feb 2012 10:31 AM

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?

**evant** · 2 Feb 2012 10:53 AM

Menu extends panel, so you can use all the usual things (componentCls, cls, bodyCls)

**alicexyl** · 2 Feb 2012 11:03 AM

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

Theming: button icon style hinders with iconCls style

Thread Tools

Search Thread

Display

Theming: button icon style hinders with iconCls style

Theming: button icon style hinders with iconCls style

Tags for this Thread