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,813
    Vote Rating
    607
    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,813
    Vote Rating
    607
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi