3

次のような URL 経由で画像をロードする ExtJS の画像コンポーネントがあります。

        {
            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 に答える