首先解釋一下標題的含義，當我們用jQuery easyui layout 進行布局的時候，可能會遇到這樣一個問題，那就是當手工調整瀏覽器大小，或者最大化、還原窗口的時候，layout的某個區域不能填充因為瀏覽器擴大而產生的空白區域，這時候看起來就比較別扭了。當然了，如果你的layout是直接放在body標簽上的，且沒有嵌套的layout的話，是不會出現layout不能自適應大小的情況的。
當布局比較復雜，勢必就會要layout嵌套起來使用，這時候出現的頁面不能自適應大小的情況就讓我不能忍受，這個問題困擾了我幾天時間，好在有萬能的網絡，問題總會得到解決，下面就將自己這兩天查資料以及自己實踐的經驗介紹給大家，希望對以后遇到同樣問題的朋友有所幫助。但是此處並不做深入分析，因為我也不熟悉jQuery和easyui。
先寫一個有嵌套的layout，父級基於body，包含north,center,west,east,south五個區域，子級layout基於父級的center區域，如果你打開頁面的時候，瀏覽器不是最大化，然后手工調整瀏覽器大小，就會發現問題所在，點擊此處查看演示。
其實，layout繼承自panel，而panel有個fit屬性，只要設置為true，layout就能自適應父元素的大小而變化，所以只要加上fit=”true”基本就可以解決問題，點擊此處查看演示，相對於不能自適應的情況，變動的代碼只有下面一行：
1 |
這種解決方案應該是最簡單的了，不過在非IE瀏覽器下面，大家可能會發現，反復調整瀏覽器大小，特別是縮小瀏覽器的時候，子級的layout就會出現滾動條，一時半會兒也沒查出是什么原因導致的。所以網上還有一種較為復雜的解決方案，那就是利用jQuery的resize事件對瀏覽器窗口監聽，當瀏覽器被調整時重新設置某些頁面元素大小，要自適應大小的話，只要設置成跟父元素同寬就可以了，下面是JS代碼：
1 var settime = null; 2 function redraw(){ 3 $('#wrap').layout('resize'); 4 $('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()}); 5 $('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()}); 6 $('#subWrap').layout('resize'); 7 } 8 $(function(){ 9 $(window).resize(function(){ 10 if(settime != null) 11 clearTimeout(settime); 12 settime=setTimeout("redraw()",100); 13 }); 14 var p1 = $('body').layout('panel','west').panel({ 15 onCollapse:function(){ 16 if(settime != null) 17 clearTimeout(settime); 18 settime=setTimeout("redraw()",100); 19 }, 20 onExpand:function(){ 21 if(settime != null) 22 clearTimeout(settime); 23 settime=setTimeout("redraw()",100); 24 }, 25 onResize:function(width,height){ 26 if(settime != null) 27 clearTimeout(settime); 28 settime=setTimeout("redraw()",100); 29 } 30 }); 31 var p2 = $('body').layout('panel','east').panel({ 32 onCollapse:function(){ 33 if(settime != null) 34 clearTimeout(settime); 35 settime=setTimeout("redraw()",100); 36 }, 37 onExpand:function(){ 38 if(settime != null) 39 clearTimeout(settime); 40 settime=setTimeout("redraw()",100); 41 }, 42 onResize:function(width,height){ 43 if(settime != null) 44 clearTimeout(settime); 45 settime=setTimeout("redraw()",100); 46 } 47 }); 48 });
當然了，用jQuery的resize監聽對於這樣的頁面還是不夠，因為當我，展開活收縮父級layout的west和east區域，或是是拉動west和est與center之間的split調整大小的時候，子級的layout依舊會出現不能自動填充的情況，所以對於這些事件，統統需要捕捉處理子級layout的布局問題，這也是我上面的js代碼為何出了監聽window的resize事件外還監聽了其它幾個事件的原因，相當麻煩？如果有更好的解決方案，歡迎大家提出來。最后調整好的頁面演示在這里
2011年11月13號更新：
使用子級layout使用fit=’true’的屬性后，基本可以使頁面保持自適應，就是在非IE瀏覽器下面，拉伸瀏覽器后，再還原包含子級layout的region便會含有滾動條。為了解決這個滾動條問題使用了jquery的resize事件，其實在不必這么大費周折，只要讓包含自己layout的region上使用overflow:hidden就可以了，這也算個折中而簡單的解決方案吧。
演示頁面看這里