title: ExtJS floating panel appeared in a wrong place because other components above it takes time to display
body: <p>I display Panel A first, then display Panel B below it. Panel A uses JSONP to get the data and is shown in the callback function of the store load. So it takes about 1 sec to show.</p>
  
  <p>I aligned a floating panel C to Panel B. The floating panel C is something like this:</p>
  
  <pre><code>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);
      }
  });
  </code></pre>
  
  <p>Then <code>floatingpanel.show()</code> is called to display the panel. It is not added to Panel B though. </p>
  
  <p>If I don't use <code>delay</code> 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. So I put the "delay". </p>
  
  <p>After 1 sec, Panel A is shown as the callback succeeded. Now the floating panel C aligns to Panel B in the right place.</p>
  
  <p>Since the callback function may succeed in 1 sec or 10 sec, the delay time is hard to choose. </p>
  
  <p>Are there other ways to work this out? I tried to use doConstrain to attach the floating panel C to Panel B: <code>floatingpanel.doConstrain(PanelB)</code>. But somehow it didn't work.</p>