Extjs 图片的自动缩放

function resizeImage(obj)
{
    var width = Ext.getCmp(‘welcome‘).getWidth();  //welcome 为一Panel的id  分割线下的代码
    var height=Ext.getCmp(‘welcome‘).getHeight();
    obj.width=width;
    obj.height=height;
}
...
{
            id:‘welcome‘,
            title: ‘首页‘,
            html:‘<img id="back" src="../../images/background.png" />‘,
            xtype:‘panel‘,
            layout:"fit",
            closable: false,
            autoScroll: true,
            listeners: {
                resize: function (panel, width, height, oldWidth, oldHeight, eOpts) {
                    var temp=document.getElementById(‘back‘);
                    resizeImage(temp);

                }
            }}

这样就可以使图片在载入和所属panel大小变化是能够自适应的显示图片

下面是两幅图片叠加，同时自适应调整图片的大小   其中aas.png是字体图片，不需要根据panel拉伸，而他的背景title需要根据panel拉伸。

将两幅图叠加显示

function resizeImageWidth(obj)
{
    var width = Ext.getCmp(‘northView‘).getWidth();
    obj.width=width;
    obj.height=60;
}

...
{
                id:‘northView‘,
                xtype:‘panel‘,
                region: ‘north‘,
                height:60,
                layout:"fit",
                html:‘<div style="position: relative"><div style="position: absolute"><img src="../../images/aas.png" height="60"/></div><img id="title" src="../../images/title.png"    /></div>‘,

                listeners: {
                    resize: function (panel, width, height, oldWidth, oldHeight, eOpts) {
                        var temp=document.getElementById(‘title‘);
                         resizeImageWidth(temp);

                    }
                }
            }