ExtJS组件自适应浏览器大小改变

       如果你再用ExtJS做项目，那么你应该会遇到如标题所说的问题，比如panel，grid等组件在浏览器大小改变的时候，没有自适应的改变，正常情况如图1-1，浏览器大小改变后如图1-2，折叠按钮不见了，这个就是因为组件没有适应浏览器大小改变造成的。不知道这个算不算得上是ExtJS的bug。一般解决办法就是通过组件自带的doLayout方法来重新计算，相当于“重绘”吧，但是有些关于讨论ExtJS性能的文章都指出了尽量不要用这个方法，由于ExtJS组件非常庞大，重新计算时很耗时间和资源的。但是如果给每个组件去加监听的话，也很麻烦，于是我想写个通用的方法，即使不那么高效我也能接受。

图1-1 正常情况

图1-2 浏览器大小改变后

       一般在每个页面会用到很多组件，没个页面都写的话很费劲，可以考虑写个通用的JS，然后每个页面都引入就OK了，但是每个用到了哪些组件也是不确定的，不过通过ExtJS提供的事件管理和组件管理就很简单了，代码如下。

Ext.onReady(function(){
                Ext.EventManager.onWindowResize(function(){
                    Ext.ComponentManager.each(function(cmpId,cmp,length){
                        if(cmp.hasOwnProperty("renderTo")){
                            cmp.doLayout();
                        }
                    });
                });
            });

       这样就非常方便了，这里ExtJS版本是4.2，具体各个函数是什么意思，看API就知道了，就不赘述了。