ExtJS：ウィンドウに画像を表示

Question

ウィンドウに画像を表示するのは簡単な作業ですが問題があります。
サイズ（可変サイズ）を表示して、サイズが300 * 400のウィンドウ（またはパネル）に表示したいとします。次に、画像をクリックするか、またはウィンドウを最大化することによって、ユーザは元のサイズの画像を見る。
次のコードは、最初のビューで画像を300 * 400のサムネイルに伸ばしますが、最大化するとフルスクリーンにも伸びます。

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

最後に、私はこのような解決策になりました。まず、カードレイアウトを使用する必要があります。次に、指定された画像に対して、初期ビュー用と最大化ビュー用の2つのコンテナを定義します。最後に、ウィンドウが最大化され復元されたときに、これらのカードを変更する必要があります。
コードは次のとおりです。私たちは「hboxの」から「フィット」の代わりのレイアウトを変更したらどう

// 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

私の例を見てみましょう：https://fiddle.sencha.com/#view/editor&fiddle/26eo

が動作しているようです。私は設定された最大の幅と高さを削除しました。

Answer 3

？これは、あなたが望むものを与えるようです - 窓が最大化されると、画像は伸びません。 Centerとvboxも機能するように見えたので、おそらくそれを動作させるために使用できるレイアウトがいくつかあります。しかし、ウィンドウ内にイメージしかないので、おそらく問題ではありません。

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