标签:
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); } } }
标签:
原文地址:http://www.cnblogs.com/mamuluke/p/4938911.html