将 loadMask() 应用于 extjs 中的单个元素? [英] Applying loadMask() to a single element in extjs?

问题描述

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

default

How to apply loadMask to only one element, and not the whole browser width-height?

default

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

here, only one element is masked, and a messageBox is in center, inside this element and not the whole display...

有任何想法吗?

any ideas?

@Molecule，谢谢，但这是从某个来源加载数据时，我需要的是:

@Molecule , thanks, but this is when data is loading from some source, what i need is :

{
    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...
    }

}

推荐答案

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

Every component has it's own loadMask property. You can use it by calling YourComponent.setLoading. Here is fiddle to illustrate what I'm talking about.

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

Another way is using new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});. You can look at usage in my fiddle.

更新

这里的代码示例展示了如何将 ExtJS4 loadMask 和 MessageBox 应用到指定的 Widget

Here is code example which shows how to apply ExtJS4 loadMask and MessageBox to specified 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');

这里是自己尝试的例子.

这篇关于将 loadMask() 应用于 extjs 中的单个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！