ウィンドウに影をつける

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ドキュメントで見つけることができます：

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

Answer 2

Owlnessは正しいです。

shadow: 'drop' 

フローティングパネル（またはウィンドウ）にシャドウを表示します。私は個人的に私が生産された影が好きではないことを発見しました。透明な黒ではなく灰色だった。 IE 8で

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

およびそれ以前、これはフォールバックをしますEXTの実装と同じ方法で：あなたはそうのようにCSSでこの（またはシャドウについての何か）をオーバーライドすることができます。しかし、most browsers support box-shadow