有时候在ExtJS做项目时,需要panel或grid等等组件在浏览器大小改变的时候自适应改变。然而有时会遇到组件没有自适应改变,不能满足我们系统需求,为了解决此类问题,做出一下例子。
正常情况如下图所示:
当浏览器改变大小后,折叠按钮不见了,这个就是因为组件没有适应浏览器大小改变造成的(不知道这个算不算得上是ExtJS的bug)。如下图所示:
一般解决办法就是通过组件自带的doLayout()方法来重新计算,相当于“重绘”吧,但是有些关于讨论ExtJS性能的文章都指出了尽量不要用这个方法,由于ExtJS组件非常庞大,重新计算时很耗时间和资源的。但是如果给每个组件去加监听的话,也很麻烦。
当我们要用doLayout()方法对相应组件进行重绘(或叫重新布局)的时候,可在加入以下代码实现:
Ext.EventManager.onWindowResize(function(){
Ext.ComponentManager.each(function(cmpId,cmp,length){
if(cmp.hasOwnProperty("renderTo")){
cmp.doLayout();
}
});
});