layout就是一個布局面板：
也就是布局的容器，有五個布局區域：北部，南部，東部，西部和中心。其中中心區域面板是必需的，但中心區域面板邊緣區域面板是可選的。通過拖動它的邊框，面板，可以調整每一個邊緣地區。可以嵌套的布局，以便用戶可以建立復雜的布局。
如果想要各個區域中的框架隨框架的大小改變，請嵌套到layout框架中；
. 代碼如下:
<script type="text/javascript">
//split屬性：如果設置為true將顯示一個分隔條，用戶可以拖動分隔條來改變布局面板的尺寸。
//href屬性：在指定區域內加載頁面的body中的部分，其他不加載
//在panel框架中我們可以看到這樣一個正則選擇（可根據自己需求進行更改）：
// extractor: function (data) {
// var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
// var matches = pattern.exec(data);
// if (matches) {
// return matches[1]; // only extract body content
// } else {
// return data;
// }
// }
//panel屬性：返回特定的布局面板，'region'參數的可取值為：'north','south','east','west','center'。
function getPanel() {
var southPanel = $("#layoutbody").layout('panel', 'south');
//獲得panel的屬性
var attributes = southPanel.panel('options');
console.info(attributes); //可以看到其中的各個屬性，浏覽器調試，這裡說明下：使用這種框架和使用js自己書寫前台代碼，浏覽器調試是必不可少的：火狐或者谷歌
}
</script>
</head>
<body id="layoutbody" class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
<input type="button" value="獲取panel" onclick="getPanel();" />
</div>
<div data-options="region:'center',title:'center title'" href="Index.htm" style="padding: 5px;
background: #eee;">
<input type="button" value="獲取panel" onclick="getPanel();" /><!--如果這裡指定了href屬性，那麼我們自己在這個部分寫的代碼將不會被現實-->
</div>
</body>
</html>