ExtJS：在窗口中显示图像

在窗口中显示图像听起来很简单，但我有问题。
我想在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();

---

看看我的例子：

---

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

看看我的示例：

---

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

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

// 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();

---

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

// 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();

---

如果我们将布局从“fit”改为“hbox”，会怎么样？这似乎给了你想要的——当窗口最大化时，图像不会拉伸。Center和vbox似乎也能工作，所以可能有一些布局可以让它工作。但是，由于窗口中只有一个图像，这可能无关紧要

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

---

如果我们将布局从“fit”改为“hbox”，会怎么样？这似乎给了你想要的——当窗口最大化时，图像不会拉伸。Center和vbox似乎也能工作，所以可能有一些布局可以让它工作。但是，由于窗口中只有一个图像，这可能无关紧要

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

---

谢谢您的解决方案的问题是，当最大化时，它也会拉伸图像。最大化后，用户希望看到原始大小的图像。谢谢。您的解决方案的问题是，当最大化时，它也会拉伸图像。当最大化时，用户希望看到原始大小的图像。谢谢。解决方案的问题在于，在初始视图中，图像没有拉伸。第一个视图中的用户希望看到图像的缩略图。这意味着图像必须拉伸到窗口大小（想想大于窗口大小的图像）。听起来，在初始视图和最大化视图中定义两个具有不同布局的图像是不可避免的。这主要是因为ExtJS在创建元素后无法更改布局。啊，好吧，看起来我只是没有完全理解你的问题。谢谢。解决方案的问题在于，在初始视图中，图像没有拉伸。第一个视图中的用户希望看到图像的缩略图。这意味着图像必须拉伸到窗口大小（想想大于窗口大小的图像）。听起来，在初始视图和最大化视图中定义两个具有不同布局的图像是不可避免的。这主要是因为ExtJS在创建元素后无法更改布局。啊，好吧，看起来我只是没有完全理解你的问题。