How to leverage Ext.Layer to add a Shadow on a Panel

[dwb]

Hello All,

I've built a Border layout (north, center, south) wrapped inside a Viewport using version 4.06.

The Border Layout's 'center' panel is the panel requiring the shadow effect. Also, the 'center' panel flexes to fill the center area, so, it automatically resizes when the Viewport (browser window) is resized.

I've tried several approaches:
1. Ext.Window - Can't be used because 'floating' the panel detaches it from layout manager's control (no window resize when viewport changes).
2. Ext.Shadow - Can be used, but, since the 'center' panel changes as the browser resizes, the Shadow doesn't automatically sync with the resized panel.

I do not wish to mess with code to sync the shadow, I would rather use Ext.Layer because this Ext element uses Ext.Shadow and handles the necessary shadow syncing and shimming. The only problem is that because Ext.Layer is an element - not a component, I'm not able to code the Ext.Layer properly.

Has anyone any ideas how to implement Ext.Layer?

Thanks,
-dwb

[mitchellsimoens]

enableShadow on the element may help you some.

[dwb]

Thanks mitchellsimoens - Unfortunately, I'm not getting it - yep, you know my next question...

Any simple sample configuration that uses Ext.Layer would be great. I've search API for components that use Layer (and therefore use Shadow). Just getting more confused.

Here's some ugly code that I'm embarrassed to share:

var shadow = new Ext.Layer(
{
config: {
shadow: true,
shim: true,
shadowOffset: 24,
hideMode: 'offsets'
},
existingEl: 'targetPanel'
});