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中实现图像大小调整的最佳方法是什么？

Answer 1

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

请与Ext js接口http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Img-cfg-shrinkWrap核对

Answer 2

有一点late...but我想这是你想要的，我碰巧使用了图片作为面板后面的缩放背景，而不是面板内部顶部的图像，但原理是一样的：

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