3

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

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

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

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

4

2 回答 2

1

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

//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();
于 2013-11-26T13:35:11.123 回答
1

你可以使用 xtype:'image' , shrinkWrap:true

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

于 2013-02-27T08:58:40.947 回答