ExtJS 4：如何自动缩放图像？（无剪裁）

Question

我在ExtJS中有一个图像组件，通过URL加载图像，就像这样：

        {
            xtype: 'image',
            width: 200,
            height: 200,
            src: 'http://www.asien-news.de/wp-content/uploads/new-york.jpg'
        },

图片以100%大小显示，只显示200x200像素的部分，其余被裁剪。我没有找到任何允许缩放的属性。

在ExtJS中实现调整图片大小的最佳方法是什么？

- simonwidjaja

---

如果图像位于容器或面板内，则可能是图像太大而无法适应其容器。调整包含图像的任何内容的大小可能会有所不同。 - fuzzyLikeSheep

不是的，图像组件的大小是正确的，但是图像并没有缩小以适应200x200px。只显示原始图像的左上角区域，但我想要图像适合组件的大小。 - simonwidjaja

哦，我刚刚仔细查看了生成的DOM。图像组件不是表示为<img.../>标签，而是表示为带有background-image的<div../>。这解释了我的“问题”。为什么它不是img标签？ - simonwidjaja

在Sencha文档中，它说：“使用配置的src将图像标签呈现到DOM中。” - fuzzyLikeSheep

好的。这很奇怪。我正在使用 Sencha Touch，它应该与常规的 ExtJS 相同（至少在这种情况下...）。但是以 DIV 的方式处理对我来说像这样：imgDiv.setStyle({'background-image':'url('+imageURI+')'}); - simonwidjaja

Answer 1

您可以使用xtype:'image'，shrinkWrap:true

请参考Ext js api http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap进行检查。

- Feroz

Answer 2

有点晚了...但我认为这就是你想要的，我碰巧将图像用作面板后面的缩放背景，而不是面板内部的图像，但理论是相同的：

//here is your view file
Ext.define('This_Is_A_Panel_On_Top_Of_A_Background_Container.view.MyViewport', {
    extend: 'Ext.container.Viewport', //my root view port
    layout: {type: 'fit'},
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                    xtype: 'container', //my background image
                    html: '<img id="imgEl" src="'+Ext.BLANK_IMAGE_URL+'">',
                    layout: {type: 'border'},
                    items: [{
                            xtype: 'panel', //my panel on top of background
                            region: 'center',
                            bodyCls: 'transparent',
                            title: 'My Panel'
                        }]
                }]
        });
        me.callParent(arguments);
    }
});

请注意，我没有使用图像组件，而是使用了一个容器。html: <img ...和bodyCls: transparent...可以解决问题。您可以在处理程序中动态更改图像。类似这样的东西：

//then say, in afterRender event, in your controller file
var imgEl = Ext.get('imgEl');
Ext.fly(imgEl).setStyle({
    backgroundImage: 'wallpaper.jpg',
    width: '100%',
    height: '100%'
}).show();

- Tom