![](/img/trans.png)
[英]How to display a floating button above other components in react native?
[英]ExtJS floating panel appeared in a wrong place because other components above it takes time to display
我先顯示面板A,然后在其下方顯示面板B。 面板A使用JSONP來獲取數據,並顯示在商店負載的回調函數中。 因此顯示大約需要1秒鍾。
我將浮動面板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);
}
});
然后調用floatingpanel.show()
來顯示面板。 但是,它沒有添加到面板B中。
如果我不使用如上所述的delay
,則浮動面板C出現在面板A中的某個位置,因為當浮動面板即將顯示時,面板A尚不可用。 所以我把“延遲”。
1秒后,面板A顯示為回調成功。 現在,浮動面板C在正確的位置與面板B對齊。
由於回調函數可能會在1秒鍾或10秒鍾內成功完成,因此很難選擇延遲時間。
還有其他解決辦法嗎? 我嘗試使用doConstrain將浮動面板C附加到面板B: floatingpanel.doConstrain(PanelB)
。 但是不知何故,它不起作用。
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);
}
請使用上面的代碼代替..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.