http://www.jeasyui.com/documentation/layout.php

Layout

Override defaults with $.fn.layout.defaults.

The layout is the Container that has up to five regions: north, south, east, west and center. The center region panel is required but edge region panel is optional. Every edge region panel can be resized by dragging its border, they also can be collapsed by clicking on its collapsing trigger. The layout can be nested, thus users can build what complex layout he wants.

Dependencies

• panel
• resizable

Usage Example

Create Layout

1. Create Layout via markup.

Add 'easyui-layout' class to <div/> markup.

1. <divid="cc"class="easyui-layout"style="width:600px;height:400px;">
2. <divdata-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>
3. <divdata-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>
4. <divdata-options="region:'east',title:'East',split:true"style="width:100px;"></div>
5. <divdata-options="region:'west',title:'West',split:true"style="width:100px;"></div>
6. <divdata-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
7. </div>

2. Create layout on whole page.

1. <bodyclass="easyui-layout">
2. <divdata-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>
3. <divdata-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>
4. <divdata-options="region:'east',title:'East',split:true"style="width:100px;"></div>
5. <divdata-options="region:'west',title:'West',split:true"style="width:100px;"></div>
6. <divdata-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
7. </body>

3. Create nested layout.

Notice that the west panel of inner layout is collapsed.

1. <bodyclass="easyui-layout">
2. <divdata-options="region:'north'"style="height:100px"></div>
3. <divdata-options="region:'center'">
4. <divclass="easyui-layout"data-options="fit:true">
5. <divdata-options="region:'west',collapsed:true"style="width:180px"></div>
6. <divdata-options="region:'center'"></div>
7. </div>
8. </div>
9. </body>

4. Loading content with ajax

The layout is created based on panel. Each region panel provides built-in support for asynchronously loading content from URLs. Using the async loading technology, users can make their layout page display more faster.

1. <bodyclass="easyui-layout">
2. <divdata-options="region:'west',href:'west_content.php'"style="width:180px"/>
3. <divdata-options="region:'center',href:'center_content.php'"/>
4. </body>

Collpase Layout Panel

1. $('#cc').layout();
2. // collapse the west panel
3. $('#cc').layout('collapse','west');

Add west region panel with tool buttons

1. $('#cc').layout('add',{
2. region:'west',
3. width:180,
4. title:'West Title',
5. split:true,
6. tools:[{
7. iconCls:'icon-add',
8. handler:function(){alert('add')}
9. },{
10. iconCls:'icon-remove',
11. handler:function(){alert('remove')}
12. }]
13. });

Layout Options

Region Panel Options

The region panel options is defined in panel component, below is some common and added properties:

Methods