положить тень на окна extjs

Question

Я хочу поставить тень на это окно, я перепробовал много вариантов, но ничего.

var win;
var button;  

function wind(cerand) {

    button = Ext.get('show-btn' + cerand);

    if(!win) {
        win = new Ext.Window({
            applyTo: 'hello-win' + cerand,
            layout: 'fit',

            closeAction: 'hide',
            plain: true,
            html: 'hello-win' + cerand,
            width: '400',
            height: '300',
            items: new Ext.FormPanel({
                applyTo: 'hello-tabs' + cerand
            }),

            buttons: [{
                text: 'Close',
                handler: function() {
                    win.hide();
                }
            }]
        });
    }
    win.alignTo(document, 'c-c', [0, -10]);
    win.show(button);
};

Answer 1

Экземпляры Ext.Window автоматически получают тени по умолчанию, хотя эффект невелик.Вы можете управлять ограниченными аспектами тени с помощью параметров конфигурации 'shadow' и 'shadowOffset'.

new Ext.Window({
    shadow: 'drop',
    shadowOffset: 10
});

Подробнее об этих параметрах можно найти в документации API для Ext.Window и Ext.Shadow:

• http://dev.sencha.com/deploy/dev/docs/?class=Ext.Window
• http://dev.sencha.com/deploy/dev/docs/?class=Ext.Shadow

Answer 2

Совсем прав.

shadow: 'drop'

Даст вам тень на плавающую панель (или окно). Я лично обнаружил, что мне не понравилась создаваемая тень. Это был серый, а не прозрачный черный. Вы можете переопределить это (или что-нибудь еще о тени) в css следующим образом:

.x-css-shadow[style] {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px !important;
}

В IE 8 и более ранних версиях это откатится так же, как и в реализации ext. Но большинство браузеров поддерживают box-shadow