今天有一个需求,就是tab面板中的背景图片添加一种图片,要自适应。
html: '<img id="bgImg" src="images/welcome.jpg"/>',
listeners: {
'tabchange':function(tab,newCard,oldCard){ //这个监听本来是可以不用的,但是不知道为何,一旦设置图片自适应,第二次点击tab就不激活了
if(tab.items.length>1){ //当tab面板数量不止一个时候,图片清空
tab.update('');
}
if(tab.items.length==1){ //当tab面板数量被关闭剩下一个时候,图片还原
tab.update('<img id="bgImg" src="images/welcome.jpg"/>');
Ext.get('bgImg').applyStyles({
width: tab.getWidth() + 'px',
height: tab.getHeight() + 'px'
});
}
},
'resize': function(comp, width, height) { //添加图片自适应监听
if(Ext.get('bgImg')!=null){
Ext.get('bgImg').applyStyles({
width: width + 'px',
height: height + 'px'
});
}
}
},
这样就实现了自适应图片。