<script type="text/javascript">
        //split屬性：如果設置為true將顯示一個分隔條，用戶可以拖動分隔條來改變布局面板的尺寸。
        //href屬性：在指定區(qū)域內(nèi)加載頁面的body中的部分，其他不加載
        //在panel框架中我們可以看到這樣一個正則選擇（可根據(jù)自己需求進行更改）：
        //        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'參數(shù)的可取值為：'north','south','east','west','center'。
        function getPanel() {
            var southPanel = $("#layoutbody").layout('panel', 'south');
            //獲得panel的屬性 
            var attributes = southPanel.panel('options');
            console.info(attributes); //可以看到其中的各個屬性，瀏覽器調(diào)試，這里說明下：使用這種框架和使用js自己書寫前臺代碼，瀏覽器調(diào)試是必不可少的：火狐或者谷歌
        }
    </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屬性，那么我們自己在這個部分寫的代碼將不會被現(xiàn)實-->
    </div>
</body>
</html>