ExtJS：在 window 中显示图像

Question

在 window 中显示图像听起来很简单，但我遇到了问题。
我想显示我的图像（可变大小）以显示在大小为 300*400 的 window（或面板）中。然后，通过单击图像或最大化 window，用户会看到原始大小的图像。
以下代码适用于在初始视图中将图像拉伸到 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

看看我的例子：https://fiddle.sencha.com/#view/editor&fiddle/26eo

似乎有效。我删除了设置的最大宽度和高度。

Answer 2

最后，我得出了这样的解决方案。首先我们需要使用卡片布局。然后我们为指定图像定义两个容器，一个用于初始视图，一个用于最大化视图。最后，我们需要在window最大化和恢复时更改这些卡片。
代码如下：

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

如果我们将布局从 'fit' 更改为 'hbox' 会怎么样？这似乎给了你你想要的 - 当 window 最大化时，图像不会拉伸。 Center 和 vbox 似乎也可以工作，因此您可能可以使用一些布局来使其工作。但由于您在 window 中只有一张图片，所以这可能无关紧要。

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

ExtJS：在 window 中显示图像

ExtJS: Display image in window

extjs

extjs5