ExtJS 4: Fenster nicht korrekt auf erste Show Sizing

Question

ich nicht verstehen kann, warum das erste Mal diesen Code ausführen:

var mypopup = Ext4.create('Suidgets.NSConfirmationBox', { 
    title: 'Delete', 
    message: 'Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>', 
    id: 'mypopup', 
    listeners: { 
     afterrender: function() { 
      this.doComponentLayout(); 
     } 
    } 
}); 

mypopup.show(); 

es gibt dieses:

Aber wenn Sie es schließen und die nächstes Mal ausgeführt wird, macht es die Fenstergröße perfekt:

Hier ist der Code des Widgets: https://jsfiddle.net/ardimaunahan/63ofm68o/

Ich habe verschiedene Ereignisse versucht, um doComponentLayout auszulösen, aber es wird immer noch nicht wirksam: show, before show, activate. Wenn Sie jedoch diese Konsole über den Browser zu tun, passt es perfekt:

Ext4.getCmp('mypopup').doComponentLayout(); 

Könnte mir jemand sagen, warum das passiert ist? Vielen Dank!

Update 1: ich den Unterschied auf den generierten HTML-Option aktiviert ist, unterscheidet sie sich von der Höhe und Breite des Hauptfensters:

Ich frage mich, wenn eine config in Ext.window gibt. Fenster, das ich verwenden kann, um diesen Fehler in Dimensionen zu beheben.

Update 2: hier eine völlig Arbeits Geige ist: https://jsfiddle.net/ardimaunahan/hcg4p3v4. Man muss im Browser Strg + F5 drücken, um das defekte Popup-Layout zu sehen. Sie müssen auch Esc drücken, um das Popup zu schließen. Wenn Sie in Firefox/Chrome auf "Popup-Schaltfläche anzeigen" klicken, wird das Layout korrekt angezeigt, im IE ist es jedoch immer noch fehlerhaft.

Answer 1

Ok, ich glaube, ich habe die Ursache gefunden. Es ist in meinem HTML-Tag speziell diese Linie (77-78):

 "         style=\"padding: 10px 20px 0px 20px\"><img", 
    "         src=\"https://firnnauriel.duckdns.org/images/icons/popup/info.gif\"><\/td>", 

Das Update würde die Größe der zu 35px von 35px eingestellt sein. Ich habe es gefunden, als ich die Breite und Höhe (700 x 500) für die Instanz meiner Komponente angegeben habe. Ich habe bemerkt, dass es sich beim ersten Mal ein wenig nach rechts bewegt, wenn das Symbol erscheint. Da das Image remote abgerufen wird und auf dem Tag keine Dimension angegeben ist, weiß das Ext-Framework nicht, wie viel es zu Beginn zugewiesen werden muss. Sobald das Symbol jedoch erscheint und Sie das Fenster ausblenden und erneut öffnen, berechnet es nun perfekt die endgültige Breite und Höhe des Fensters.

Answer 2

Ich fürchte, dass Sie die show() Funktion der Box außer Kraft zu setzen haben.

Die folgende scheint für mich zu arbeiten:

show:function() { 
    this.callParent(arguments); 
    this.doComponentLayout(); 
} 

Ich bin nicht sicher, ob dies funktioniert Cross-Browser, überprüfen Sie bitte vor dem Gebrauch.