将loadMask()应用于extjs中的单个元素？

Question

如何将loadMask仅应用于一个元素,而不是整个浏览器的width-height？

默认

这里,只有一个元素被屏蔽,一个messageBox位于这个元素内部,而不是整个显示...

有任何想法吗？

编辑:

@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.这是用来说明我在说什么的小提琴.

另一种方式是使用new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});.你可以看看我的小提琴中的用法.

UPDATE

下面是代码示例,演示如何将ExtJS4 loadMask和MessageBox应用于指定的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');

这是自己动手的例子.