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

发布于 2024-11-25 17:14:06 字数 630 浏览 1 评论 0原文

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

default
在此处输入图像描述



这里,只有一个元素被屏蔽,消息框位于该元素内部的中心,而不是整个显示...
在此处输入图像描述


有什么想法吗?

编辑:

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

}

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

default
enter image description here

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

any ideas?

EDIT:

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

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

椒妓 2024-12-02 17:14:06

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

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

更新

这是代码示例,展示了如何将 ExtJS4 loadMask 和 MessageBox 应用于指定的小部件

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

,这里是 亲自尝试示例

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.

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

UPDATE

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

And here is try-it-yourself example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文