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

【问题标题】：Applying loadMask() to a single element in extjs?将 loadMask() 应用于 extjs 中的单个元素？
【发布时间】：2011-10-10 05:07:02
【问题描述】：

如何将 loadMask 仅应用于一个元素，而不是整个浏览器的宽高？

默认

在这里，只有一个元素被屏蔽，并且一个 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...
    }

}

【问题讨论】：

你说的是元素，但它们是组件。
@Chris，是的，他们是 Components :-)

标签： load extjs4 extjs mask

【解决方案1】：

每个组件都有自己的loadMask 属性。您可以通过调用YourComponent.setLoading 来使用它。这是fiddle 来说明我在说什么。

另一种方法是使用new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});。您可以在我的fiddle 中查看用法。

更新

这里的代码示例展示了如何将 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');

这里是try-it-yourself example。

【讨论】：

ExtJS 中的所有组件都至少有一个el 属性，它实际上是一个Ext.Element，它指向包装div。只要你能访问到这个el元素，你总是可以在这个el上调用.mask()或.unmask()，或者Ext.Element中定义的任何方法。
能否提供Ext.Msg.show和loadNask的简单例子？？请
@Ingol，当然。看看这个fiddle
@Ingol，我提供了 Ext.Msg.show 和 loadMask 的示例。并将其添加到我的帖子中
@Molecul - 非常感谢！