Javascript ExtJS 4 设置视口的加载掩码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10597722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS 4 setting Loading mask for the viewport
提问by Leron_says_get_back_Monica
I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:
我正在尝试为我的视口设置加载掩码，因为加载它需要很多时间。我试过这个：
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
// myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
beforerender: function() {
myMask.show();
},
afterrender: function() {
myMask.destroy();
}
},
renderTo: 'id-sym-container',
layout: {...
but it seems that I never get into beforerender. I tried with console.login the beforerenderfunction and it also doesn't appear. When I try like this:
但似乎我永远不会进入beforerender。我console.log在beforerender函数中尝试过，它也没有出现。当我这样尝试时：
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
// beforerender: function() {
// myMask.show();
// },
afterrender: function() {
myMask.destroy();
}
},
it works but my mask is showing way too late. Am I using beforerenderwrong way and what's the way to start myMaskexactly when my Viewportstarts to render?
它有效，但我的面具显示为时已晚。我是否使用了beforerender错误的方式，以及myMask在我Viewport开始渲染时准确开始的方式是什么？
Thanks
谢谢
Leron
勒龙
回答by Alex
Your code isn't setting a loading mask for the viewport, but for the body
您的代码不是为 设置加载掩码viewport，而是为body
Ergo what you can do is, the bit of code that does...
因此，您可以做的是，代码的位...
Ext.create('MY.view.Viewport');
should look like..
应该看起来像..
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
viewport = Ext.create('MY.view.Viewport');
viewport.on('afterrender',function(){myMask.destroy();},this);
The guys in the comments are right though :P
评论里的人是对的：P
回答by HandyManDan
In ExtJs 4, you can declare the loadmask in the viewport:
在 ExtJs 4 中，您可以在视口中声明加载掩码：
Ext.define('Tps.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewport',
initComponent: function () {
Ext.apply(this, {
layout: 'fit',
items: [
{
xtype: 'loadmask',
id: 'load-indicator',
indicator: true,
hidden: true,
target: this
}
]
});
this.callParent();
}
});
Note the target config is the viewport itself. To show/hide the load mask, make a call to
请注意，目标配置是视口本身。要显示/隐藏负载掩码，请调用
Ext.getCmp('load-indicator').show();
Ext.getCmp('load-indicator').hide();
Show the load mask in the render event for the viewport or set the hidden config to false.
在视口的渲染事件中显示加载掩码或将隐藏配置设置为 false。
