extjs内の1つの要素にloadMask（）を適用しますか？

Question

ブラウザ全体の幅 - 高さではなく、1つの要素にのみloadMaskを適用するにはどうすればよいですか？

デフォルト

ここでは、一つだけの要素がマスクされ、メッセージボックスは、ディスプレイ全体この要素の内部ではなく、中央にある...

任意のアイデア？

EDIT：

@Molecule、感謝しますが、データはいくつかのソースからロードされたとき、これは、何が必要なのである。

{ 
    xtype:"button", 
    text:"Alert", 
    handler: function(){ 

     Ext.Msg.show({ 
     title:'Save Changes?', 
     msg: 'You are closing ?', 
     buttons: Ext.Msg.YES, 
     setLoading: // here somehow only mask parent element, and position alertBox... 
    } 

} 

Answer 1

すべてのコンポーネントは、それが自分のloadMaskプロパティのしています。 YourComponent.setLoadingを呼び出すことで使用できます。ここで私が話していることを説明するためにfiddleです。

もう1つの方法はnew Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});です。あなたは私のfiddleで使用法を見ることができます。

UPDATE

はここウィジェット指定

Ext.create('Ext.panel.Panel', { 
    width: 600, 
    height: 400, 
    title: 'Border Layout', 
    layout: 'border', 
    items: [{ 
     title: 'West Region is collapsible', 
     region:'west', 
     xtype: 'panel', 
     width: 400, 
     id: 'west-region-container', 
     layout: 'fit' 
    },{ 
     title: 'Center Region', 
     region: 'center', 
     xtype: 'panel', 
     layout: 'fit', 
    }], 
    renderTo: Ext.getBody() 
}); 
var myMask = new Ext.LoadMask(Ext.getCmp('west-region-container').el, {useMsg: false}); 
myMask.show(); 
var msg = Ext.Msg.show({ 
    title:'Save Changes?', 
    msg: 'Bla-Bla', 
    buttons: Ext.Msg.OK, 
    modal: false 
}); 
msg.alignTo(Ext.getCmp('west-region-container').el, 'c-c'); 

にコードExtJS4 loadMaskを適用する方法を示す例とメッセージボックスであり、ここでtry-it-yourself exampleです。