¿Aplicar loadMask() a un solo elemento en extjs?

Question

¿Cómo aplicar loadMask a un solo elemento y no a todo el ancho del navegador?

predeterminado

aquí, sólo un elemento está enmascarado, y una messageBox está en el centro, dentro de este elemento y no toda la pantalla ...

cualquier ideas?

EDIT:

@Molecule, gracias, pero esto es cuando se cargan los datos de una fuente, lo que necesito es:

{ 
    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

Cada componente tiene su propio loadMask propiedad. Puede usarlo llamando al YourComponent.setLoading. Aquí está fiddle para ilustrar de lo que estoy hablando.

Otra forma es usar new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});. Puedes ver el uso en mi fiddle.

ACTUALIZACIÓN

Aquí es ejemplo de código que muestra cómo aplicar ExtJS4 loadMask y de mensaje que se especifique 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'); 

Y aquí es try-it-yourself example.