Stosowanie metody loadMask() do pojedynczego elementu w extjs?

Question

Jak zastosować loadMask tylko do jednego elementu, a nie do całej szerokości przeglądarki?

domyślny

tutaj, tylko jeden element jest zamaskowany, a MessageBox jest w środku, wewnątrz tego elementu, a nie całego ekranu ...

dowolny pomysły?

EDIT:

@Molecule, dzięki, ale to jest, gdy się ładuje dane z jakiegoś źródła, co jest mi potrzebne:

{ 
    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

Każdy komponent ma swój własny loadMask nieruchomość. Możesz go użyć, dzwoniąc pod numer YourComponent.setLoading. Oto fiddle, aby zilustrować to, o czym mówię.

Innym sposobem jest użycie new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});. Możesz spojrzeć na użycie w moim fiddle.

UPDATE

Oto przykład kodu, który pokazuje, jak zastosować ExtJS4 loadMask i MessageBox do określonego Widget

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

A oto try-it-yourself example.