ExtJS 4 Anzeige Bild im modalen Fenster

Question

In meiner Anwendung verwende ich spezielle Taste, um sehr einfaches Fenster mit nur einem Element - Bild aufzurufen. Dieses Bild ist ziemlich groß, also setze ich als Windows Attribute: maxHeight: 700 und autoScroll: true. Bilddefinition ist die folgende:

initComponent: function() { 
    var me = this; 

    Ext.apply(me, { 
     items: [ 
      { 
       xtype:  'image', 
       src:  'obr/picture.jpg', 
       shrinkWrap: true, 
       mode:  'image' 
      } 
     ], 
     dockedItems: [ 
      { 
       xtype: 'toolbar', 
        dock: 'bottom', 
        height: 40, 
        items: [ 
         { 
          xtype: 'tbfill' 
         }, 
         { 
          xtype: 'button', 
          handler: me.onClose, 
          margin: '0 10 0 0', 
          text: 'Close' 
         } 
        ] 
       } 
      ] 
    }); 
    this.callParent(); 
} 

Und wenn ich auf „Bild“, um das Fenster immer auf nenne ich das gleiche sehen (wenn Anwendung ist „frisch“, neu gestartet). Nach dem ersten Aktion kann ich

(immer) sehen, und wenn ich auf „Schließen“ -Knopf drücken und nenne es wieder kann ich dieses Fenster mit Bild in der richtigen Größe zu sehen. Ich kann den Grund nicht finden. Könnten Sie mir bitte sagen, was los ist?

verwende ich ExtJS 4.2 und Fensterdefinition ist die folgende:

Ext.define('MyApp.view.Picture', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.mywindow', 

    requires: [ 
     'Ext.toolbar.Toolbar', 
     'Ext.button.Button' 
    ], 

    resizable: false, 
    closable: false, 
    modal:  true, 
    title:  'Nice picture...', 
    maxHeight: 700, 
    autoScroll: true, 
... 

Answer 1

Sie waren ganz in der Nähe, aber Ereignis "load" funktionieren nicht. Die Antwort ist hier:

http://www.appfoundation.com/2012/08/ext-js-dynamic-image-refresh-and-load/

Zuhörer Schrei sein:

listeners : { 
     afterrender : function(me){ 
      me.el.on({ 
        load: function (evt, ele, opts) { 
         me.doComponentLayout(); 
        } 
       }); 
      } 
     } 
} 

Answer 2

Auf Last Falle einer image Verwendung doLayout Methode des Fensters, als Bild einige Zeit dauern, zu laden. Eg .:

{ xtype: 'image', src: 'obr/picture.jpg', shrinkWrap: true, mode: 'image', listeners: { load: function() { this.up('window').doLayout(); } } }

Hoffnung das wird Ihnen helfen :)