PDA

View Full Version : Icon not showing in toolbar button (with menu items)



RobWilson
7 Feb 2010, 1:03 PM
Hi,

I have been experimenting trying to create a toolbar, with buttons comprising of an associated menu. The top-level button requires an icon, so should the menu items.

Unfortunately I can't get the top-level button icon to appear, even though the icon is exactly the same as the menu item icon.

I've cut down the code to the bare minimum. Does anyone know what I've overlooked?


<style type="text/css">
.icon-contact {
background-image: url('${pageContext.request.contextPath}/images/silk-icons/email_open.png');
}
</style>


function createHorizontalUI() {

var myWin = new Ext.Window({
height: 600,
width : 800,
border : false,
title : 'My test frame',
layout : 'border',
tbar: [
{
xtype: 'buttongroup',
title: 'Views',
defaults: {
scale: 'medium',
iconAlign:'top',
arrowAlign:'bottom'
},
items: [{
xtype:'splitbutton',
text: 'Profiles',
iconCls: 'icon-contact',
menu: [
{text: 'Contact Information', iconCls: 'icon-contact'}
]
}
]
}
],
items: [
{
type: 'panel',
region: 'center',
html: 'Booo!',
autoScroll: true
},
]
});
myWin.show();
}
Cheers,
Rob.

tobiu
7 Feb 2010, 2:50 PM
deja vu, we already had this today ;)



<style type="text/css">
.icon-contact {
background-image: url('${pageContext.request.contextPath}/images/silk-icons/email_open.png') !important;
}
</style>


kind regards,
tobiu

joefox
7 Feb 2010, 3:02 PM
dont forget to do a x-btn image also

RobWilson
7 Feb 2010, 11:48 PM
Hi Tobiu,

That worked a treat, thanks =D> ... I must have missed the post earlier, it would have saved me a lot of time.

RobWilson
7 Feb 2010, 11:49 PM
dont forget to do a x-btn image also

Ji Joefox, the toolbar is now rendering after adding the !important keyword in the CSS rule, so what's the x-btn image you refer to - I don't understand.

Cheers,
Rob.

tobiu
8 Feb 2010, 1:56 AM
hi RobWilson,

nice it works now and no problem you missed the other topic, since there are a lot each day. some ext-css use a blank-image as default, so if a dom-node has 2 (or more) subclasses with background-images, the browser does not know which one to take by default. though it is a really bad comparison, you can imagine it a bit like the z-index with 2 levels.

kind regards,
tobiu

RobWilson
9 Feb 2010, 12:44 PM
hi RobWilson,

some ext-css use a blank-image as default, so if a dom-node has 2 (or more) subclasses with background-images, the browser does not know which one to take by default



Cheers - I now understand why it's required, I hate it when I don't 'get it' :D, thanks for your time.