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
});

有关这些选项的更多信息，请参阅Ext.Window和Ext.Shadow的API文档：

Answer 2

猫头鹰是对的。

shadow: 'drop'

会在浮动面板（或窗口）上给你一个阴影。我个人发现我并不喜欢产生的阴影。它是灰色而不是透明的黑色。您可以在css中覆盖此（或阴影的任何其他内容），如下所示：

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

在IE 8及更早版本中，这将以与ext实现相同的方式回落。但是most browsers support box-shadow

把阴影放在窗口extjs上

2 个答案: