http://www.loststop.com/wap/index-wap2.php?p=3725
首先解釋一下標題的含義，當我們用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”基本就可以解決問題，點擊此處查看演示，相對於不能自適應的情況，變動的代碼只有下面一行：
[html]
[/html]
這種解決方案應該是最簡單的了，不過在非IE瀏覽器下面，大家可能會發現，反覆調整瀏覽器大小，特別是縮小瀏覽器的時候，子級的layout就會出現滾動條，一時半會兒也沒查出是什麼原因導致的。所以網上還有一種較爲複雜的解決方案，那就是利用jQuery的resize事件對瀏覽器窗口監聽，當瀏覽器被調整時重新設置某些頁面元素大小，要自適應大小的話，只要設置成跟父元素同寬就可以了，下面是JS代碼：
[javascript]
var settime = null;
function redraw(){
$(‘#wrap’).layout(‘resize’);
$(‘#subWrap’).layout(‘panel’, ‘north’).panel(‘resize’,{width:$(‘#subWrap’).width()});
$(‘#subWrap’).layout(‘panel’, ‘center’).panel(‘resize’,{width:$(‘#subWrap’).width()});
$(‘#subWrap’).layout(‘resize’);
}
$(function(){
$(window).resize(function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
});
var p1 = $(‘body’).layout(‘panel’,'west’).panel({
onCollapse:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
},
onExpand:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
},
onResize:function(width,height){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
}
});
var p2 = $(‘body’).layout(‘panel’,'east’).panel({
onCollapse:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
},
onExpand:function(){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
},
onResize:function(width,height){
if(settime != null)
clearTimeout(settime);
settime=setTimeout(“redraw()”,100);
}
});
});
[/javascript]
當然了，用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就可以了，這也算個折中而簡單的解決方案吧。
演示頁面看這裏