PDA

View Full Version : Ext.Button and background-image CSS



Duranne
1 Oct 2010, 6:08 AM
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
1 Oct 2010, 6:21 AM
try adding the "!important" to the end.

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

Duranne
1 Oct 2010, 6:43 AM
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
1 Oct 2010, 6:45 AM
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!