[英]ExtJS 5: Resize panel on image loaded
It seems like a trivial task to do but I'm still unable to accomplish it. 这似乎是一件微不足道的任务,但我仍然无法完成。 I'm building an application with ExtJS 5 and I have a panel with an image component on it.
我正在用ExtJS 5构建一个应用程序,并且有一个带有图像组件的面板。 The panel has to resize (
shrinkWrap : true
) to the original size of the image. 面板必须调整大小(
shrinkWrap : true
)到图像的原始大小。 The problem is that when the layout manager is calculating the size of the panel, the image isn't yet loaded completely so it's size is 0,0. 问题在于,当布局管理器计算面板的大小时,图像尚未完全加载,因此其大小为0,0。 I tried to add different listeners like
afterrender
, render
, boxready
and practically all of the rest but nothing seems to work fo me - the image size is always equals to 0. I also tried to bind the sizes of the two components as you'll see in the code below, but this doesn't worked either. 我试图添加不同的侦听器,例如
afterrender
, render
, boxready
以及几乎所有其他监听afterrender
,但似乎没有任何效果-图像大小始终等于0。我还尝试将两个组件的大小绑定在一起请参见下面的代码,但这也不起作用。 If i configure the boxready
event with a delay of 1 second the image size is finally computed and I can call updateLayout()
but this is a very unreliable solution because the image is loaded from remote server and I'm unable to predict the exact time of server response. 如果我将
boxready
事件配置为延迟1秒,则最终boxready
算出图像大小,并且可以调用updateLayout()
但这是一个非常不可靠的解决方案,因为图像是从远程服务器加载的,因此我无法预测确切的时间服务器响应。 I know that at some point of the application lifecycle the image is loaded and I need to find which event is being fired in order to resize my panel. 我知道在应用程序生命周期的某个时刻,图像已加载,我需要找到要触发哪个事件以调整面板大小。
Example code 范例程式码
Ext.application({ name : 'MyApp',
launch : function() {
/*
* I was hoping that taking the image out of the panel
* will 'force' it to be created earlier.
*/
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
}
listeners : {
boxready : { fn : 'imgReady', scope : this, delay : 100 }
}
});
Ext.create('Ext.Panel', {
renderTo : Ext.get('extjs-content'),
width : 1000,
height: 700,
defaults : {
border : true
},
layout : 'border',
items : [{
region : 'north',
height : 80,
}, {
region : 'east',
width : 200,
collapsible : true
}, {
region : 'center',
autoScroll : true,
items : [{
/*
* This is the container of the image. Please note that
* I need it to preserve its absolute layout.
*/
id : 'canvas',
layout : 'absolute',
shrinkWrap : true,
// bind : {
// width : '{bgimg.width}',
// height: '{bgimg.height}'
// },
items : [img]
}]
}]
});
},
/*
* If I call this with delay of 1000ms the image size is 'ready'
* otherwise it is 0, 0.
*/
imgReady : function(img) {
console.log('Image size: %o', img.getSize());
Ext.ComponentQuery.query('#canvas')[0].updateLayout();
}
});
You can track when the image is loaded with the load
event of the img element. 您可以使用img元素的
load
事件跟踪何时加载图像。
var img = Ext.create('Ext.Img', {
src : 'img.jpg',
reference : 'bgimg',
publishes : {
width : true,
height: true
},
listeners : {
load : {
element : 'el',
fn : 'imgReady'
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.