PDA

View Full Version : icon for panel: doesn't work



TheMonolith
19 Feb 2010, 2:52 AM
Displaying an icon next to the panel title doesn't work using the following approach:

CSS element:



<style>
.magnifierIcon { background-image: url(../images/magnifierIcon.png) 0 6px no-repeat !important; }
</style>
panel definition:



var previewPanel = new Ext.Panel({
title: 'Preview',
iconCls: 'magnifierIcon',
width: 400,
height: 600,
x: 50,
y: 50
});
Why is that? The file magnifierIcon.png exists in the specified folder. I checked the spelling several times.

TheMonolith
19 Feb 2010, 3:03 AM
I just noticed the panel title is shifted a little to the right. In other words, the title is placed as if there was an icon - but it is invisible.

goldledoigt
19 Feb 2010, 3:14 AM
No offense but are you sure the relative path to your png file is correct ?
Use help of firebug (inspect) to check it out.

tobiu
19 Feb 2010, 3:33 AM
what does firebug say? ;)

try it without 0 6px no-repeat.

kind regards,
tobiu

TheMonolith
19 Feb 2010, 4:14 AM
Firebug says nothing.

If I remove the "0 6px no-repeat ", then the upper left part of the icon image is shown (it is 27 x 32 pixels).

Why is only the upper left part of the icon image displayed?

Also, can somebody please explain the syntax of the CSS bit to me? I looked up the background-image property (http://www.w3schools.com/css/pr_background-image.asp) and understand that, but what is the meaning of "0 6px no-repeat" and where do I find a detailed explanation of the syntax?

Eugen_
19 Feb 2010, 4:23 AM
Why is only the upper left part of the icon image displayed?

Maybe because the iconCls specifies a background image to be used as the header icon. The header height less than 32 pixels. Am I wrong?


0 6px no-repeat

0 - left shift
6px - top shift
no-repeat - no tiling

tobiu
19 Feb 2010, 4:39 AM
the icons are designed for 16*16 pixels, that should be the part you can see. bigger icons would destroy the layout, if they were shown in full size (imagine tree-nodes, window-header etc.).

kind regards,
tobiu

TheMonolith
19 Feb 2010, 4:47 AM
Thank you for your answers.

Can I not increase the header height so that a larger image like my 27 x 32 pixel one fits?

Reading the API Docs, I feel like the headerCfg property might be the way to a solution, but the docs of that property are poorly written. There is only a reference to bodyCfg and the docs for that are difficult to comprehend.

Eugen_
19 Feb 2010, 4:54 AM
Can I not increase the header height so that a larger image like my 27 x 32 pixel one fits?

Reading the API Docs, I feel like the headerCfg property might be the way to a solution, but the docs of that property are poorly written. There is only a reference to bodyCfg and the docs for that are difficult to comprehend.



.my-cls {
height: 32px;
}


headerCfg: {
cls: 'x-panel-header my-cls'
},