ExtJS浮動面板出現在錯誤的地方，因爲其他組件上面需要時間來顯示

Question

我首先顯示面板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秒後，Panel A顯示回調成功。現在浮動面板C在正確的位置與面板B對齊。

由於回調函數可能在1秒或10秒內成功，所以延遲時間很難選擇。

還有其他方法可以解決這個問題嗎？我嘗試使用doConstrain將浮動面板C連接到面板B：floatingpanel.doConstrain(PanelB)。但不知何故，它沒有奏效。

Answer 1

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); 
} 

請使用上面的代碼，而不是..