PDA

View Full Version : How can I remove the border that shows up around the icon in an Ext.Panel header?



chiquitomuir
23 Nov 2010, 8:32 AM
I have setup an accordion layout and added a single panel to it, assigning it an iconCls to a CSS class that defines an icon for the background. However when I view it in IE 8, or Chrome 7.0, I get a border around the icon. It's even worse in Firefox - the image doesn't show up at all.

Any ideas? Can you point me to a resource that can explain it? Any help would be greatly appreciated.

Thanks.

Here is the code:

Workbench.MainNavigation = function(){
Workbench.MainNavigation.superclass.constructor.call(this, {
layout: 'accordion',
title: 'test',
region: 'west',
margins:'-5 0 5 5',
split:true,
width: 210,
layoutConfig: {
animate: true,
activeOnTop: false
},
items: [{
title: 'Administration',
iconCls: 'icon-cog'
}]
});
}
Ext.extend(Workbench.MainNavigation, Ext.Panel);

And here is the iconCls CSS:

.icon-cog{
background-image: url(../images/cog.png) !important;
background-repeat:no-repeat;
}

chiquitomuir
23 Nov 2010, 8:36 AM
Nevermind, I figured it out. The value I had set for Ext.BLANK_IMAGE_URL was invalid for the page that I was on, I fixed the reference and it fixed everything up!

Thanks anyways! :)