Ext.Button and background-image CSS

[Duranne]

Hi,

I would like to create my own tool bar, like the one there is in the Ext.form.HtmlEditor (the one with the "bold", "italic"... buttons).
I manage to get an icon showing on these buttons by using the 'icon' property of the Ext.Button, but I do not manage to get the icon showing by using the 'iconCls' property

My code looks like this :

var toolBar = new Ext.Toolbar({standard config options...});
var buttonBold = new Ext.Button({    
                                id : 'boldBtn',
                                enableToggle : true,
                                cls : 'x-btn-icon',
                                iconCls:'boldBtn'
                                //iconCls : 'x-edit-bold',
                                tabIndex:-1
                            });
toolBar.addButton(buttonBold);

with the following CSS :

.boldBtn{
  background-image : url("bold.png");
}

And my button is not filled with the 'blod.png' picture...

Am I doing something wrong?

And it would be perfect if I can use the 'tb-sprite.gif' which is the piture used by the HtmlEditor...
I looked the code of the HtmlEditor but I can't find what I am missing here to get it working.

Thanks!

[troseberry]

try adding the "!important" to the end.

.add{
 background-image: url(bold.png) !important;
}

[Duranne]

It seems to work! Nice one, thank you!

And I just realized that I need to set my toolbar with
cls:'x-html-editor-tb'
in order to be able to use the same CSS as the html editor...

Thanks again! You saved my afternoon!

[Duranne]

It seems to work! Nice one, thank you!

And I just realized that I need to set my toolbar with
cls:'x-html-editor-tb'
in order to be able to use the same CSS as the html editor...

Thanks again! You saved my afternoon!