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就知道了，就不贅述了。