CODEWITHSUNDEEP
cssextjsextjs4.2
Oliver Watkins
Oliver Watkins

Reputation: 13489

Adding icon to Extjs toolbar

I am trying to add an icon to my toolbar (arbitrary - not associated with a button).

In my CSS I define the URL like this :

.myCoolLookingIcon {
    background-image: url('../ext-theme-gray/images/grid/columns.gif');
}

And that works fine if I am setting icons for buttons by using iconCls.

I would like this icon in a label or image

I have tried :

            xtype: 'label',
            iconCls: 'myCoolLookingIcon '

and 

            xtype: 'image',
            html: '<img class="myCoolLookingIcon "/>'

but that doesn't seem to work in either case.

Upvotes: 2

Views: 6439

Answers (2)

Darren Alfonso
Darren Alfonso

Reputation: 1390

Ultimately I ended up doing this. A little hacky but it worked.

{
    xtype: 'label',
    itemId: 'labelWithIcon',
    text: '',
    cls: 'classNameWithImgBackground',
    listeners: {
      render: function () {
        this.setText('<span style="margin-left: 16px;">Label Text</span>', false);
      }
    }
}

Upvotes: 2

Vivek Vardhan
Vivek Vardhan

Reputation: 1178

This is one of the way of achieving what you want (Not using the iconCls)

xtype:'label',
html: '<img src=\"path_to_icon\">'

Try this:

 xtype:'label',
 html: '<img class="className" width="20" height="20">'

Giving width and height, makes it work.

Upvotes: 6

Related Questions