simple ExtJS-style Shadow for an <img> ?

[Flonq]

Hey there,

I have a div in my page (outside any Ext.container, so far I render ExtJS components only in certain other divs...)

<div id="myImgLane">
   <img src="img/foo/bar/012511.jpg" width="328" height="140" alt="">
   <div class="centeredCaptions">a nice picture</div>
</div>

• I would like that Image to have shadows just like ExtJS Dialog boxes have... may be a bit more exaggerated/wider.
• I don't mind inserting a panel/cimponent/box here, as long as it has no visual impact other than casting a shadow... if that's not an option, should/can I re/abuse ext-ish CSS-styles ?
• Width and height of the image is known, but wildy differs all the time. (all figured out at rendertime, php-side)
• A not on the side. My background is not unicolor. In fact, the outermost div has it's own jpg as background.. it's an outermost div, not an underlying div, z-buffer-wise speaking. Is that a problem? Not sure if alpha-png-backgrounds of higher div layers behave (read: fade) properly against outer divs, or only against literally underlying divs...

Somebody has a simple solution for this?

Thank you!

Frank

[stevenwilford]

This should be quite simple, and a quick look at the API docs would have revealed the solution (my suspicions as to why you haven't received a response).

You create an instance of Ext.Shadow, optionally specifying the mode for the shadow (sides, frame or drop) and an offset in pixels.

The Ext.Shadow instance is then attached to an element by calling the show() method and passing the element or element ID as the first and only parameter.

The only caveat is the image element should be positioned absolutely.

[Flonq]

Hey Steven,

I didn't think this might exist as a dedicated class... So I didn't search the API.

Thanx for letting me know.

The only caveat is the image element should be positioned absolutely.

To be under, it has to be. I will make a postion:absolute within a postion:relative and that should do the trick...

"Thread closed."

Frank