1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Bremen, Germany
    Posts
    41
    Answers
    1
    Vote Rating
    0
    momesana is on a distinguished road

      0  

    Default Answered: IconCls Issue

    Answered: IconCls Issue


    Hi,
    I tried to create a window-ish toolbar for my application and realized the buttons were not aligned correctly (in Ext js 4.0.2a) even though I set the iconCls to a stylesheet definition like this:

    .toolbar-icon {
    background-position: top center;
    }
    The javascript code looks like this:
    Code:
    {
                xtype: 'toolbar',
                dock: 'top',
                defaults: {
                  arrowAlign: 'bottom',
                  iconAlign: 'top',
                  scale: 'large'
                },
                items: [{
                    icon: 'resources/images/tango/32x32/actions/document-new.png',
                    text: 'Bearbeiten',
                    action: 'edit'
                }, {
                    icon: 'resources/images/tango/32x32/actions/document-save.png',
                    text: 'Speichern',
                    action: 'save'
                }, {
                    icon: 'resources/images/tango/32x32/actions/document-print.png',
                    text: 'Drucken',
                    action: 'print'
                }]
            }
    While inspecting the dom I realized the stylesheet class was applied to a span (<span class="x-btn-icon toolbar-icon">) below the span that really contains the background-image (<span class="x-btn-inner" style="background-image...">). Applying the mentioned stylesheet definition to .x-btn-inner correctly aligns the image but what is the purpose of iconCls then? Is it meant as a mean to have fine-grained controll over the background-image when I choose not to use the icon property at all and instead opt for using iconCls to declare a background property?

    Why doesn't iconAlign: 'top', arrowAlign: 'bottom' horizontally center-align the icon in the first place?

    Thanks in advance

  2. iconCls is the preferred way to specify an icon in many components, including buttons. Usually you would only specify a background-image in such a class, positioning should be automatic.

    I agree, using icon instead of iconCls doesn't align things correctly, I think this is a bug. I tried your example with iconCls instead and it aligns things nicely.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    iconCls is the preferred way to specify an icon in many components, including buttons. Usually you would only specify a background-image in such a class, positioning should be automatic.

    I agree, using icon instead of iconCls doesn't align things correctly, I think this is a bug. I tried your example with iconCls instead and it aligns things nicely.

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Bremen, Germany
    Posts
    41
    Answers
    1
    Vote Rating
    0
    momesana is on a distinguished road

      0  

    Default


    Thank you very mich skirtle. I'll try that out tomorrow.

Thread Participants: 1