PDA

View Full Version : displaying image in panel



TheMonolith
22 Feb 2010, 1:54 AM
What is the easiest/best way to display an image in a panel?

I tried the following code but no image is displayed. I use Firefox 3.6 and Firebug doesn't complain about anything:



var previewPanel = new Ext.Panel({
title: 'Preview',
iconCls: 'magnifierIcon',
width: 400,
height: 600,
bodyStyle: "background-image: url(apple-mac.jpg) !important",
x: 50,
y: 50
});
Your help is greatly appreciated!

fay
22 Feb 2010, 3:22 AM
Are you sure that the path to the background-image is correct? I tested something similiar with the \examples\panel\panels.js example and it worked fine.

Animal
22 Feb 2010, 3:23 AM
Debug with Firebug. It will show a 404 in the net tab, and also, hovering over the image url in the style pane shows a spinner if the image can't be loaded.

Really, you should be able to work things out.

TheMonolith
22 Feb 2010, 3:58 AM
@ fay

The path to the background image is definitely set correctly. The image is in the same directory as the script. I also checked the spelling for the third time and it is also correct.

@ Animal

As I said, Firebug doesn't show an error when executing the script. I also opened the HTML pane on the left and then the Style pane on the right and clicked on the :hover command but it did nothing.

Is there another way to find the problem with Firebug?

Animal
22 Feb 2010, 4:07 AM
Is the style applied to the Panel body?

Check in Firebug. If so, hover hover the URL to see if the image is loaded. It's simple.

TheMonolith
22 Feb 2010, 5:41 AM
It seems like the style has not been applied:


<div class="x-panel-bwrap" id="ext-gen16"><div class="x-panel-body" id="ext-gen17" style="width: 398px; height: 572px;"></div></div>

But why?

Animal
22 Feb 2010, 6:00 AM
I don't think it likes "!important"

Animal
22 Feb 2010, 6:02 AM
Which makes sense. It't not applicable to inline style. It's a modifier on cascading stylesheet rules.

TheMonolith
22 Feb 2010, 6:20 AM
It works when I remove "!important". However, the image is vertically repeated. If I add "no-repeat", then no image at all is displayed.

Is it because the "no-repeat" (like "!important") is not applicable to inline styles?
And, even more important, how can I find out which styles are applicable to inline styles?

Animal
22 Feb 2010, 6:41 AM
That would be background style!

Read the CSS standard!