在我自己的《Web開發架構》中，用了很多年的EasyUI，最新版本EasyUI為1.4.5，随着版本的更新，其很多功能得到了很大的完善和提高，同時也擴充了一些新的功能，以前在布局和對話框彈出層的自動适應大小的問題，也在最近的一些版本得到了解決，本文在遷移到最新EasyUI版本的時候，總結了一些經驗，希望對大家使用這個強大的Web界面元件有所幫助。
上面的布局是頂部内容+一級菜單、左邊菜單，右邊主内容為頁面内容，頁面内容是變化的内容，其他部分為不變的，這樣的布局代碼如下所示。
在上面的首頁面布局代碼裡面，<div class="easyui-layout" 外面注意不要包含有Form的标志，否則會出現一些莫名其妙的錯誤。我們通過data-options="fit:true,border:false"來設定布局的自動适應，這樣在放大縮小頁面的時候，布局總是能夠自動适應頁面的變化的。
在之前的一些版本裡面，DataGrid總是沒有能夠自動實作寬度的自動調整，為了實作這種效果，還需要添加一些JS代碼進行處理，這種方式在現在DataGrid支援寬度百分比的屬性後，變得簡單容易了。
表格的HTML代碼如下所示。
而其中我們自動通過JQuery指派的JS代碼如下所示。
為了實作其自動伸縮，我們隻需要設定 width: '100%'就可以了，不需要像以前那樣需要自動寬度。
在我們《Web開發架構》裡面，利用DIV層作為界面的子視窗是一種很常見的處理方式，是以彈出的對話框層需要設定好其對應的自動縮放效果。
特别是由于不同的電腦裝置上，筆記本和台式電腦的高度不同，還有分辨率不同，是以它們的寬度高度需要非常靈活的自動調整處理，實作我們界面的一緻性。
以上界面我們通過樣式的調整就可以實作對話框大小的變化，以及跟随整體布局的調整，總體居中的效果了。
其中 style="width:98%;max-width:824px;height:98%;max-height:300px;" 確定了對話框不會太大變得難看，我們讓它保持一個較好的大小。
其中 onResize:function(){$(this).dialog('center');} 讓它在布局變化的時候自動把對話框居中，這樣效果更加好看。
以上就是我們通常在實作布局和對話框自動适應大小所做的一些處理，能夠很好的适應我們不同的裝置分辨率。