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

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

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

Answer 2

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

// 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”怎么办？这似乎给你你想要的东西 - 当窗口最大化时，图像不会伸展。中心和vbox似乎也可以工作，所以可能有一些布局可以用来使它工作。但由于你只在窗口中有一个图像，它可能无关紧要。

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

ExtJS：在窗口中显示图像

3 个答案: