YouTip` tag.
2. Create a layout on the entire page.
3. Create a nested layout.
Note that the inner layout's west panel is collapsed.
4. Load content via ajax.
The layout is built upon panels. Each region panel provides built-in support for dynamically loading content from a URL. Using dynamic loading techniques, users can make their layout pages display faster.
#### Collapsing a Layout Panel
$('#cc').layout();// collapse the west panel $('#cc').layout('collapse','west');
#### Adding a West Panel with Tool Buttons
$('#cc').layout('add',{ region: 'west', width: 180, title: 'West Title', split: true, tools: [{iconCls:'icon-add',handler:function(){alert('add')} },{iconCls:'icon-remove',handler:function(){alert('remove')} }]});
## Layout Options
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| fit | boolean | When set to true, the layout will resize to fit its parent container. When created on the 'body' tag, it will automatically maximize to the full size of the page. | false |
## Region Panel Options
Region Panel Options are defined in the panel component. Below are some common and additional properties:
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| title | string | The title text of the layout panel. | null |
| region | string | Defines the position of the layout panel. Possible values are: north, south, east, west, center. | |
| border | boolean | When set to true, the layout panel's border is displayed. | true |
| split | boolean | When set to true, a split bar is displayed, which the user can drag to resize the panel. | false |
| iconCls | string | A CSS class to display an icon in the panel header. | null |
| href | string | A URL to load data from a remote site. | null |
| collapsible | boolean | Defines whether to show the collapsible button. | true |
| minWidth | number | The minimum width of the panel. | 10 |
| minHeight | number | The minimum height of the panel. | 10 |
| maxWidth | number | The maximum width of the panel. | 10000 |
| maxHeight | number | The maximum height of the panel. | 10000 |
## Methods
| Name | Parameter | Description |
| --- | --- | --- |
| resize | none | Sets the size of the layout. |
| panel | region | Returns the specified panel. The 'region' parameter can be: 'north', 'south', 'east', 'west', 'center'. |
| collapse | region | Collapses the specified panel. The 'region' parameter can be: 'north', 'south', 'east', 'west'. |
| expand | region | Expands the specified panel. The 'region' parameter can be: 'north', 'south', 'east', 'west'. |
| add | options | Adds a specified panel. The options parameter is a configuration object. For more details, refer to the tab panel properties. |
| remove | region | Removes the specified panel. The 'region' parameter can be: 'north', 'south', 'east', 'west'. |
* * jQuery EasyUI Plugin](#)
Plugins Layout Layout
* * jQuery EasyUI Plugin](#)
* * *
Override the default defaults via `$.fn.layout.defaults`.
The layout is a container with five regions (north, south, east, west, and center). The center region panel is required, while the edge region panels are optional. Each edge region panel can be resized by dragging its border and can be collapsed by clicking the collapse trigger. Layouts can be nested, allowing users to build complex layouts.
!(#)
## Dependencies
* panel
* resizable
## Usage
#### Creating a Layout
1. Create a layout using markup.
Add the 'easyui-layout' class to a `