高分求高手解决一个ext小问题,有正确解答立即给分！！！！！！

Question

代码如下：Ext.onReady(function(){
var ImgPanel = Ext.extend(Ext.Panel, {
initComponent: function(){
ImgPanel.superclass.initComponent.call(this);
this.initContents();
},
initContents: function(){
this.el.mask("正在加载...", "x-mask-loading");
Ext.Ajax.request({
url: "getImgUrl.jsp",
scope: this,
success: function(response){
var o = Ext.decode(response.responseText);
this.el.unmask();
if(o.imgurl){
this.imgurl = o.imgurl;
}
}
});
this.html = '<img src="'+this.imgurl+'" width="600" height="500" />';
}
});
new ImgPanel({
width: 800,
height: 600,
renderTo: Ext.getBody(),
title: "数据加载",
frame: true,
border: true
});
});
getImgUrl.jsp返回数据：{
imgurl: "images/psu.png"
}
我想在panel的html里面显示一张图片，图片的地址是从后台读取出来的，加载图片的时候是想在panel上面有个遮罩的，但是显示的有这么一个错误：this.el is undefined，而且图片也显示不出来，是什么原因呀？

Answer 1

Ext.onReady(function(){
var ImgPanel = Ext.extend(Ext.Panel, {
initComponent: function(){
ImgPanel.superclass.initComponent.call(this);
this.initContents();
},
initContents: function(){
var t = this;
this.el.mask("正在加载...", "x-mask-loading");
Ext.Ajax.request({
url: "getImgUrl.jsp",
scope: this,
success: function(response){
var o = Ext.decode(response.responseText);
t.el.unmask();
if(o.imgurl){
t.imgurl = o.imgurl;
t.html = '<img src="'+t.imgurl+'" width="600" height="500" />';
}
}
});
}
});
new ImgPanel({
width: 800,
height: 600,
renderTo: Ext.getBody(),
title: "数据加载",
frame: true,
border: true
});
});
getImgUrl.jsp返回数据：{
imgurl: "images/psu.png"
}
试试

Answer 2

重新设置图像的 z 轴的位置试试. z-index