I am working off the nested layout demo and trying to create one with a single central work area like this (single.png attached) that can can be split into two central panes (double.png, attached) and reverted back to the original single central work area by the user. I am pasting my code below for the layout (this creates the layout with the double central work area) .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui_altered.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true" style="height:60px;background-color:#336699">
<div style="margin:20px 0;">
<!--<span>Select Region Panel:</span>
<select id="region">
<option value="north">North</option>
<option value="south">South</option>
<option value="east">East</option>
<option value="west">West</option>
</select>
<button onclick="hideCenterEast('ee')">Hide Center East</button>
<button onclick="showCenterEast('ee')">Show Center East</button>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>-->
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addCenterEast()">Add Center East</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeCenterEast()">Remove Center East</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addCenterEastInners()">Add Center East Inners</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="showCenterEast('ee')">Show Center East</a>
<!--<a href="javascript:void(0)" class="easyui-linkbutton" onclick="altAddCenterEast()">Alt Add Center East</a>
<button onclick="altAddCenterEast()">Alt Add Center East2</button>
<button onclick="altRemoveCenterEast()">Alt Remove Center East2</button>-->
</div>
</div>
<div data-options="region:'south',split:true" style="height:30px;background-color:#336699">
</div>
<div data-options="region:'east',split:true" title="East" style="width:15%;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'south',split:true" title="East South" style="height:40%"> East South Content</div>
<div data-options="region:'center',split:true">East Center Content</div>
</div>
</div>
<div data-options="region:'west',split:true" title="West" style="width:15%;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'south',split:true" title="West South" style="height:40%">West South Content</div>
<div data-options="region:'center',split:true">West Center Content</div>
</div>
</div>
<div id="ct" data-options="region:'center', split:true">
<div id="cc" class="easyui-layout" data-options="fit:true">
<div id="ee" data-options="region:'east',split:true" style="width:50%" title="Center East before" > Center East Content Before
<div id="ei" class="easyui-layout" data-options="fit:true">
<div id="es" data-options="region:'south',split:true" title="Center East South" style="height:25%">Center East South Content Before</div>
<!--<div id="ec" data-options="region:'center',split:true">Center East Center Content</div>-->
</div>
</div>
<div data-options="region:'center',split:true, iconCls:'icon-ok'" title="Center Center">Center Center Content before
<div class="easyui-layout" data-options="fit:true" >
<div data-options="region:'south',split:true" title="Center Center South" style="height:25%">Center South Content</div>
<!--<div data-options="region:'center',split:true">Center Center Content</div>-->
</div>
</div>
</div>
</div>
</div>
<!-- my javascript is here, but I chopped it out for simplicity -->
</body>
I am having no problem destroying the extra pane when I start with the double model by using the following function:
function altRemoveCenterEast() {
$("#ee").remove();
}
But when I try and recreate the double layout with the nested south portion, all I can get is this (incorrect.png, attached).
I am using this function to try and restore the center east portion with nexted south:
function addCenterEast() {
$('#cc').layout('add', { region: 'east', split:true, width: '50%'});
$('#ei').layout('add', {
region: 'south',
title: 'Center East South after',
split: true,
content: 'Center East South Content After',
id: 'es',
height: 100
});
Any suggestions? Thanks
