如何用Sencha ExtJS中的遮罩覆盖两个重叠的组件？

Question

在Sencha中，我可以通过在背景组件上调用this.view.mask（）来掩盖背景组件并很好地调出对话框组件。

然后，当我在顶部对话框中按“提交”时，我希望使用遮罩将对话框和背景组件全部覆盖，而不仅仅是遮罩较小的对话框。我不想只遮罩对话框，因为即使背景也被遮罩，对话框的边框仍然明显很亮。

如何将两个组件都掩盖在一起？

在对话框上，我尝试了this.view.mask（“ Loading ...”），但是只有小对话框被遮盖了。它的边框仍然清晰明亮，因此很明显，我们只是在小对话框上而不是整个页面上放置蒙版。

我尝试通过view = Ext.ComponentQuery.query（'MyComponent'）[0]查询背景组件，然后使用view.mask（“ Loading”），但这只会将蒙版添加到该背景组件。

Answer 1

这是一个丑陋的解决方案，但对我有用。在7.0.0上测试]

var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
    wndSize = wnd.getSize(),
    myMask;

myMask = new Ext.LoadMask({
    msg    : 'Please wait...',
    target : wnd,
    height: wndSize.height,
    width: wndSize.width
});

myMask.show().setXY(wnd.getXY());