码迷,mamicode.com
首页 > Web开发 > 详细

Extjs 图片的自动缩放

时间:2015-11-05 11:59:22      阅读:455      评论:0      收藏:0      [点我收藏+]

标签:

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" onload="resizeImage(this)"/>‘,
            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" onload="resizeImageWidth(this)"/></div>‘, listeners: { resize: function (panel, width, height, oldWidth, oldHeight, eOpts) { var temp=document.getElementById(‘title‘); resizeImageWidth(temp); } } }

 

Extjs 图片的自动缩放

标签:

原文地址:http://www.cnblogs.com/mamuluke/p/4938911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!