Layout

Dependencies

Usage Example

Create Layout

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

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

Create layout on whole page.

  1. <body class="easyui-layout">  
  2.     <div region="north" title="North Title" split="true" style="height:100px;"></div>  
  3.     <div region="south" title="South Title" split="true" style="height:100px;"></div>  
  4.     <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  
  5.     <div region="west" split="true" title="West" style="width:100px;"></div>  
  6.     <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  
  7. </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 Panel Options

Name Type Description Default
title string The layout panel title text. null
region string Defines the layout panel position, the value is one of following: north, south, east, west, center.
border boolean True to show layout panel border. true
split boolean True to show a split bar which user can change the panel size. false
iconCls string An icon CSS class to show a icon on panel header. null
href string An URL to load data from remote site. null

Methods

Name Parameter Description
resize none Set the layout size.
panel region Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.
collapse region Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.
expand region Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.
add options Add a specified panel, the options parameter is a config object, see tab panel properties for more details.
remove region Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'.