[英]ExtJS floating panel appeared in a wrong place because other components above it takes time to display
I display Panel A first, then display Panel B below it. 我先显示面板A,然后在其下方显示面板B。 Panel A uses JSONP to get the data and is shown in the callback function of the store load.
面板A使用JSONP来获取数据,并显示在商店负载的回调函数中。 So it takes about 1 sec to show.
因此显示大约需要1秒钟。
I aligned a floating panel C to Panel B. The floating panel C is something like this: 我将浮动面板C与面板B对齐。浮动面板C是这样的:
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 334,
width: 540,
layout: {
type: 'border'
},
title: 'Run report',
initComponent: function () {
var me = this;
floatingpanel = Ext.create('Ext.panel.Panel', {
html: "something",
width: 100,
height: 50,
floating: true,
listeners: {
'show': {
fn: function () {
floatingpanel.alignTo(PanelB, "tr-tr", [left, top]);
},
scope: floatingpanel,
//delay: 1000, // to wait for other component to show
single: true
}
}
});
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
});
Then floatingpanel.show()
is called to display the panel. 然后调用
floatingpanel.show()
来显示面板。 It is not added to Panel B though. 但是,它没有添加到面板B中。
If I don't use delay
as shown above, the floating panel C appeared somewhere in Panel A since Panel A is not available yet when the floating panel is about to show. 如果我不使用如上所述的
delay
,则浮动面板C出现在面板A中的某个位置,因为当浮动面板即将显示时,面板A尚不可用。 So I put the "delay". 所以我把“延迟”。
After 1 sec, Panel A is shown as the callback succeeded. 1秒后,面板A显示为回调成功。 Now the floating panel C aligns to Panel B in the right place.
现在,浮动面板C在正确的位置与面板B对齐。
Since the callback function may succeed in 1 sec or 10 sec, the delay time is hard to choose. 由于回调函数可能会在1秒钟或10秒钟内成功完成,因此很难选择延迟时间。
Are there other ways to work this out? 还有其他解决办法吗? I tried to use doConstrain to attach the floating panel C to Panel B:
floatingpanel.doConstrain(PanelB)
. 我尝试使用doConstrain将浮动面板C附加到面板B:
floatingpanel.doConstrain(PanelB)
。 But somehow it didn't work. 但是不知何故,它不起作用。
initComponent: function () {
var me = this;
floatingpanel = Ext.create('Ext.panel.Panel', {
html: "something",
width: 100,
height: 50,
// floating: true,
listeners: {
'show': {
fn: function () {
me.alignTo(PanelB, "tr-tr", [left, top]);
},
scope: floatingpanel,
//delay: 1000, // to wait for other component to show
single: true
}
}
});
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
please use above code instead of ..
请使用上面的代码代替..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.