ExtJS: Bild im Fenster anzeigen

Question

Bild in einem Fenster anzeigen klingt eine einfache Aufgabe, aber ich habe ein Problem damit.
Ich möchte mein Bild (mit variabler Größe) in einem Fenster (oder Panel) mit der Größe 300 * 400 zeigen. Durch Klicken auf das Bild oder Maximieren des Fensters sieht der Benutzer das Bild in seiner Originalgröße.
Der folgende Code funktioniert, um das Bild in der Startansicht auf 300 * 400 Miniaturbilder zu strecken, aber wenn es maximiert wird, erstreckt es sich auch auf den Vollbildmodus.

var myImage = Ext.create('Ext.Img', { 
    src: imgSrc, 
}); 
picWin = Ext.create('Ext.window.Window', { 
    title: "My Picture", 
    width: 300, 
    height: 400, 
    maximizable: true, 
    maxWidth: myImage.getWidth(), 
    maxHeight: myImage.getHeight(), 
    layout: "fit", 
    items: [myImage] 
}) 
picWin.show(); 

Answer 1

Schließlich kam ich zu einer Lösung wie folgt. Zuerst müssen wir Kartenlayout verwenden. Dann definieren wir zwei Container für das angegebene Bild, eines für die erste Ansicht und eines für die maximierte Ansicht. Letztendlich müssen wir diese Karten ändern, wenn das Fenster maximiert ist und wenn es wiederhergestellt wird.
-Code lautet wie folgt:

// Two image for when maximizing and when in initial view 
var myImage = Ext.create('Ext.container.Container', { 
    layout: 'fit', 
    items: [{ 
     xtype: 'image', 
     src: imgSrc 
    }] 
}); 
var myImage2 = Ext.create('Ext.container.Container', { 
    scrollable: true, 
    items: [{ 
     xtype: 'image', 
     src: imgSrc 
    }] 
}); 
picWin = Ext.create('Ext.window.Window', { 
    title: "my title", 
    width: 300, 
    height: 400, 
    maximizable: true, 
    layout: "card", 
    activeItem: 0, 
    items: [myImage,myImage2], 
    listeners: { 
     maximize: function(){ 
      this.setActiveItem(1); 
     }, 
     restore: function(){ 
      this.setActiveItem(0); 
     }, 
    } 
}) 
picWin.show(); 

Answer 2

einen Blick auf mein Beispiel nehmen: https://fiddle.sencha.com/#view/editor&fiddle/26eo

scheint zu funktionieren. Ich entfernte die maximale Breite und Höhe des Satzes.

Answer 3

Was passiert, wenn wir das Layout von 'fit' zu 'hbox' statt verändert? Dies scheint Ihnen zu geben, was Sie wollen - wenn das Fenster maximiert ist, dehnt sich das Bild nicht. Center und vbox schienen ebenfalls zu funktionieren, also gibt es wahrscheinlich ein paar Layouts, die Sie verwenden könnten, um es zu funktionieren. Aber da Sie nur ein Bild im Fenster haben, spielt es wahrscheinlich keine Rolle.

picWin = Ext.create('Ext.window.Window', { 
     title: "My Picture", 
     width: 300, 
     height: 400, 
     maximizable: true, 
     layout: "hbox", 
     items: [myImage] 
    }) 
    picWin.show(); 
}