View Full Version : Shadow for a Non-floating Panel?

18 Jan 2012, 10:51 AM

I'm attempting to apply a shadow to a simple panel, but, the panel that needs the shadow is not floating (and must remain that way so that it can be managed by ext's layout manager).

I've unsuccessfully tried other approaches like using extending Ext.Shadow and Ext.Layer; these seem to just generate JS errors. So how does one put a shadow around a container/panel/any ext element without floating it?

a. I could just use CSS3 - but that's no good for browser that don't have ver. 3 stylesheet support.
b. I have used images, this works perfectly but has overhead and requires extra code with each new panel instance - not very efficient.

Here is the testing code for the simple panel i want to see a shadow around.

Ext.define('Nile.view.layout.TestCurrent', {
extend: 'Ext.panel.Panel',
id: 'test',
margin: '10 10 10 10',

initComponent: function() {
Ext.applyIf(this, {

items: [{
xtype: 'panel',
id: 'testPanel0',
height: 402,
width: 627,
title: 'My Panel',
html: 'testPanel0',
bodyStyle: 'background: #ccc'

18 Jan 2012, 11:24 AM
Below is a working example you can build from:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shadow Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
title: 'West',
width: 120
xtype: 'panel',
region: 'center',
title: 'Center',
layout: 'absolute',
items: [{
xtype: 'panel',
height: 300,
itemId: 'targetPanel',
width: 300,
title: 'Shadow Test Panel',
x: 200,
y: 50

var shadow = Ext.create('Ext.Shadow', {
mode: 'frame'

shadow.show( Ext.ComponentQuery.query('#targetPanel')[0].el );


18 Jan 2012, 2:13 PM
Excellent friend; this has set me on my way - thanks!