Print Friendly

# Class Ext.LayoutRegion

Package: | Ext
Class: | LayoutRegion
Extends: | BasicLayoutRegion
Subclasses: | SplitLayoutRegion
Defined In: | LayoutRegion.js

This class represents a region in a layout manager.
Properties - Methods - Events - Config Options

## Public Properties

Property | Defined By
--- | ---
| bodyEl : Ext.Element | LayoutRegion
This region's body element
| collapsedEl : Ext.Element | LayoutRegion
This region's collapsed element
| el : Ext.Element | LayoutRegion
This region's container element
| panels : Ext.util.MixedCollection | BasicLayoutRegion
A collection of panels in this region.
| titleEl : Ext.Element | LayoutRegion
This region's title element
| titleTextEl : HTMLElement | LayoutRegion
This region's title text element

## Public Methods

Method | Defined By
--- | ---
| add( `ContentPanel... panel` ) : Ext.ContentPanel | LayoutRegion
Adds the passed ContentPanel(s) to this region.
| addEvents( `Object object` ) : void | Observable
Used to define events on this Observable
| addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void | Observable
Appends an event handler to this component
| collapse( [`Boolean skipAnim`] ) : void | LayoutRegion
Collapses this region.
| expand( `Ext.EventObject e`, [`Boolean skipAnim`] ) : void | LayoutRegion
Expands this region if it was previously collapsed.
| fireEvent( `String eventName`, `Object... args` ) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getActivePanel() : Ext.ContentPanel | LayoutRegion
Get the active panel for this region.
| getEl() : Ext.Element | LayoutRegion
Returns the container element for this region.
| getPanel( `Number/String/ContentPanel panel` ) : Ext.ContentPanel | BasicLayoutRegion
Returns the panel specified or null if it's not in this region.
| getPosition() : String | BasicLayoutRegion
Returns this regions position (north/south/east/west/center).
| getTabs() : Ext.TabPanel | LayoutRegion
Returns the TabPanel component used by this region
| hasListener( `String eventName` ) : Boolean | Observable
Checks to see if this object has any listeners for a specified event
| hasPanel( `Number/String/ContentPanel panel` ) : Boolean | BasicLayoutRegion
Returns true if the panel is in this region.
| hide() : void | LayoutRegion
Hides this region.
| hidePanel( `Number/String/ContentPanel panel` ) : void | LayoutRegion
Hides the tab for the specified panel.
| isVisible() : Boolean | LayoutRegion
Returns true if this region is currently visible.
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| remove( `Number/String/ContentPanel panel`, `Boolean preservePanel` ) : Ext.ContentPanel | LayoutRegion
Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void | Observable
Removes a listener
| resizeTo( `Number newSize` ) : void | BasicLayoutRegion
Resizes the region to the specified size. For vertical regions (west, east) this adjusts the width, for horizontal (...
| setCollapsedTitle( [`String title`] ) : void | LayoutRegion
Updates the title for collapsed north/south regions (used with collapsedTitle config option)
| show() : void | LayoutRegion
Shows this region if it was previously hidden.
| showPanel( `Number/String/ContentPanel panelId` ) : Ext.ContentPanel | LayoutRegion
Shows the specified panel.
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void | Observable
Removes a listener (shorthand for removeListener)
| unhidePanel( `Number/String/ContentPanel panel` ) : void | LayoutRegion
Unhides the tab for a previously hidden panel.

## Public Events

Event | Defined By
--- | ---
| beforeremove : ( `Ext.LayoutRegion this`, `Ext.ContentPanel panel`, `Object e` ) | BasicLayoutRegion
Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
| collapsed : ( `Ext.LayoutRegion this` ) | BasicLayoutRegion
Fires when this region is collapsed.
| expanded : ( `Ext.LayoutRegion this` ) | BasicLayoutRegion
Fires when this region is expanded.
| invalidated : ( `Ext.LayoutRegion this` ) | BasicLayoutRegion
Fires when the layout for this region is changed.
| panelactivated : ( `Ext.LayoutRegion this`, `Ext.ContentPanel panel` ) | BasicLayoutRegion
Fires when a panel is activated.
| paneladded : ( `Ext.LayoutRegion this`, `Ext.ContentPanel panel` ) | BasicLayoutRegion
Fires when a panel is added.
| panelremoved : ( `Ext.LayoutRegion this`, `Ext.ContentPanel panel` ) | BasicLayoutRegion
Fires when a panel is removed.
| resized : ( `Ext.LayoutRegion this`, `Number newSize` ) | BasicLayoutRegion
Fires when the user resizes this region.
| slidehide : ( `Ext.LayoutRegion this` ) | BasicLayoutRegion
Fires when this region slides out of view.
| slideshow : ( `Ext.LayoutRegion this` ) | BasicLayoutRegion
Fires when this region is slid into view.
| visibilitychange : ( `Ext.LayoutRegion this`, `Boolean visibility` ) | BasicLayoutRegion
Fires when this region is shown or hidden

## Config Options

Config Options | Defined By
--- | ---
| alwaysShowTabs : Boolean | LayoutRegion
True to always display tabs even when there is only 1 panel (defaults to false)
| animate : Boolean | LayoutRegion
True to animate expand/collapse (defaults to false)
| autoHide : Boolean | LayoutRegion
False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
| autoScroll : Boolean | LayoutRegion
True to enable overflow scrolling (defaults to false)
| closeOnTab : Boolean | LayoutRegion
True to place the close icon on the tabs instead of the region titlebar (defaults to false)
| cmargins : Object | LayoutRegion
Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {...
| collapsed : Boolean | LayoutRegion
True to set the initial display to collapsed (defaults to false)
| collapsedTitle : String | LayoutRegion
Optional string message to display in the collapsed block of a north or south region
| collapsible : Boolean | LayoutRegion
False to disable collapsing (defaults to true)
| disableTabTips : Boolean | LayoutRegion
True to disable tab tooltips
| floatable : Boolean | LayoutRegion
False to disable floating (defaults to true)
| hidden : Boolean | LayoutRegion
True to start the region hidden (defaults to false)
| hideTabs : Boolean | LayoutRegion
True to hide the tab strip (defaults to false)
| hideWhenEmpty : Boolean | LayoutRegion
True to hide the region when it has no panels
| margins : Object | LayoutRegion
Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
| minTabWidth : Number | LayoutRegion
The minimum tab width (defaults to 40)
| preferredTabWidth : Number | LayoutRegion
The preferred tab width (defaults to 150)
| preservePanels : Boolean | LayoutRegion
True to preserve removed panels so they can be readded later (defaults to false)
| resizeTabs : Boolean | LayoutRegion
True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within the spa...
| showPin : Boolean | LayoutRegion
True to show a pin button
| tabPosition : String | LayoutRegion
"top" or "bottom" (defaults to "bottom")
| title : String | LayoutRegion
The title for the region (overrides panel titles)
| titlebar : Boolean | LayoutRegion
True to display a title bar (defaults to true)

## Property Details

### bodyEl

`public Ext.Element bodyEl`
This region's body element
This property is defined by LayoutRegion.

### collapsedEl

`public Ext.Element collapsedEl`
This region's collapsed element
This property is defined by LayoutRegion.

### el

`public Ext.Element el`
This region's container element
This property is defined by LayoutRegion.

### panels

`public Ext.util.MixedCollection panels`
A collection of panels in this region.
This property is defined by BasicLayoutRegion.

### titleEl

`public Ext.Element titleEl`
This region's title element
This property is defined by LayoutRegion.

### titleTextEl

`public HTMLElement titleTextEl`
This region's title text element
This property is defined by LayoutRegion.

## Method Details

### add

`public function add( `ContentPanel... panel` )`
Adds the passed ContentPanel(s) to this region.
Parameters:

- `panel` : ContentPanel...
  The ContentPanel(s) to add (you can pass more than one)

Returns:

- `Ext.ContentPanel`
  The panel added (if only one was added; null otherwise)

This method is defined by LayoutRegion.

### addEvents

`public function addEvents( `Object object` )`
Used to define events on this Observable
Parameters:

- `object` : Object
  The object with the events defined

Returns:

- `void`

This method is defined by Observable.

### addListener

`public function addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] )`
Appends an event handler to this component
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
  - delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
  - single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
  - buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

      el.on('click', this.onClick, this, {
       			single: true,
          		delay: 100,
          		forumId: 4
      		});

  Attaching multiple handlers in 1 call
  The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

      el.on({
      			'click': {
              		fn: this.onClick,
              		scope: this,
              		delay: 100
          		},
          		'mouseover': {
              		fn: this.onMouseOver,
              		scope: this
          		},
          		'mouseout': {
              		fn: this.onMouseOut,
              		scope: this
          		}
      		});

  Or a shorthand syntax which passes the same scope object to all handlers:

      el.on({
      			'click': this.onClick,
          		'mouseover': this.onMouseOver,
          		'mouseout': this.onMouseOut,
          		scope: this
      		});

Returns:

- `void`

This method is defined by Observable.

### collapse

`public function collapse( [`Boolean skipAnim`] )`
Collapses this region.
Parameters:

- `skipAnim` : Boolean
  (optional) true to collapse the element without animation (if animate is true)

Returns:

- `void`

This method is defined by LayoutRegion.

### expand

`public function expand( `Ext.EventObject e`, [`Boolean skipAnim`] )`
Expands this region if it was previously collapsed.
Parameters:

- `e` : Ext.EventObject
  The event that triggered the expand (or null if calling manually)
- `skipAnim` : Boolean
  (optional) true to expand the element without animation (if animate is true)

Returns:

- `void`

This method is defined by LayoutRegion.

### fireEvent

`public function fireEvent( `String eventName`, `Object... args` )`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### getActivePanel

`public function getActivePanel()`
Get the active panel for this region.
Parameters:

- None.

Returns:

- `Ext.ContentPanel`
  The active panel or null

This method is defined by LayoutRegion.

### getEl

`public function getEl()`
Returns the container element for this region.
Parameters:

- None.

Returns:

- `Ext.Element`

This method is defined by LayoutRegion.

### getPanel

`public function getPanel( `Number/String/ContentPanel panel` )`
Returns the panel specified or null if it's not in this region.
Parameters:

- `panel` : Number/String/ContentPanel
  The panels index, id or the panel itself

Returns:

- `Ext.ContentPanel`

This method is defined by BasicLayoutRegion.

### getPosition

`public function getPosition()`
Returns this regions position (north/south/east/west/center).
Parameters:

- None.

Returns:

- `String`

This method is defined by BasicLayoutRegion.

### getTabs

`public function getTabs()`
Returns the TabPanel component used by this region
Parameters:

- None.

Returns:

- `Ext.TabPanel`

This method is defined by LayoutRegion.

### hasListener

`public function hasListener( `String eventName` )`
Checks to see if this object has any listeners for a specified event
Parameters:

- `eventName` : String
  The name of the event to check for

Returns:

- `Boolean`
  True if the event is being listened for, else false

This method is defined by Observable.

### hasPanel

`public function hasPanel( `Number/String/ContentPanel panel` )`
Returns true if the panel is in this region.
Parameters:

- `panel` : Number/String/ContentPanel
  The panels index, id or the panel itself

Returns:

- `Boolean`

This method is defined by BasicLayoutRegion.

### hide

`public function hide()`
Hides this region.
Parameters:

- None.

Returns:

- `void`

This method is defined by LayoutRegion.

### hidePanel

`public function hidePanel( `Number/String/ContentPanel panel` )`
Hides the tab for the specified panel.
Parameters:

- `panel` : Number/String/ContentPanel
  The panel's index, id or the panel itself

Returns:

- `void`

This method is defined by LayoutRegion.

### isVisible

`public function isVisible()`
Returns true if this region is currently visible.
Parameters:

- None.

Returns:

- `Boolean`

This method is defined by LayoutRegion.

### on

`public function on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] )`
Appends an event handler to this element (shorthand for addListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional)

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### remove

`public function remove( `Number/String/ContentPanel panel`, `Boolean preservePanel` )`
Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
Parameters:

- `panel` : Number/String/ContentPanel
  The panel's index, id or the panel itself
- `preservePanel` : Boolean
  Overrides the config preservePanel option

Returns:

- `Ext.ContentPanel`
  The panel that was removed

This method is defined by LayoutRegion.

### removeListener

`public function removeListener( `String eventName`, `Function handler`, [`Object scope`] )`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### resizeTo

`public function resizeTo( `Number newSize` )`
Resizes the region to the specified size. For vertical regions (west, east) this adjusts the width, for horizontal (north, south) the height.
Parameters:

- `newSize` : Number
  The new width or height

Returns:

- `void`

This method is defined by BasicLayoutRegion.

### setCollapsedTitle

`public function setCollapsedTitle( [`String title`] )`
Updates the title for collapsed north/south regions (used with collapsedTitle config option)
Parameters:

- `title` : String
  (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&#160;")

Returns:

- `void`

This method is defined by LayoutRegion.

### show

`public function show()`
Shows this region if it was previously hidden.
Parameters:

- None.

Returns:

- `void`

This method is defined by LayoutRegion.

### showPanel

`public function showPanel( `Number/String/ContentPanel panelId` )`
Shows the specified panel.
Parameters:

- `panelId` : Number/String/ContentPanel
  The panel's index, id or the panel itself

Returns:

- `Ext.ContentPanel`
  The shown panel, or null if a panel could not be found from panelId

This method is defined by LayoutRegion.

### un

`public function un( `String eventName`, `Function handler`, [`Object scope`] )`
Removes a listener (shorthand for removeListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### unhidePanel

`public function unhidePanel( `Number/String/ContentPanel panel` )`
Unhides the tab for a previously hidden panel.
Parameters:

- `panel` : Number/String/ContentPanel
  The panel's index, id or the panel itself

Returns:

- `void`

This method is defined by LayoutRegion.

## Event Details

### beforeremove

`public event beforeremove`
Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `panel` : Ext.ContentPanel
  The panel
- `e` : Object
  The cancel event object

This event is defined by BasicLayoutRegion.

### collapsed

`public event collapsed`
Fires when this region is collapsed.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion

This event is defined by BasicLayoutRegion.

### expanded

`public event expanded`
Fires when this region is expanded.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion

This event is defined by BasicLayoutRegion.

### invalidated

`public event invalidated`
Fires when the layout for this region is changed.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion

This event is defined by BasicLayoutRegion.

### panelactivated

`public event panelactivated`
Fires when a panel is activated.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `panel` : Ext.ContentPanel
  The activated panel

This event is defined by BasicLayoutRegion.

### paneladded

`public event paneladded`
Fires when a panel is added.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `panel` : Ext.ContentPanel
  The panel

This event is defined by BasicLayoutRegion.

### panelremoved

`public event panelremoved`
Fires when a panel is removed.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `panel` : Ext.ContentPanel
  The panel

This event is defined by BasicLayoutRegion.

### resized

`public event resized`
Fires when the user resizes this region.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `newSize` : Number
  The new size (width for east/west, height for north/south)

This event is defined by BasicLayoutRegion.

### slidehide

`public event slidehide`
Fires when this region slides out of view.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion

This event is defined by BasicLayoutRegion.

### slideshow

`public event slideshow`
Fires when this region is slid into view.
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion

This event is defined by BasicLayoutRegion.

### visibilitychange

`public event visibilitychange`
Fires when this region is shown or hidden
Subscribers will be called with the following parameters:

- `this` : Ext.LayoutRegion
- `visibility` : Boolean
  true or false

This event is defined by BasicLayoutRegion.

## Config Details

### alwaysShowTabs

`alwaysShowTabs : Boolean`
True to always display tabs even when there is only 1 panel (defaults to false)
This config option is defined by LayoutRegion.

### animate

`animate : Boolean`
True to animate expand/collapse (defaults to false)
This config option is defined by LayoutRegion.

### autoHide

`autoHide : Boolean`
False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
This config option is defined by LayoutRegion.

### autoScroll

`autoScroll : Boolean`
True to enable overflow scrolling (defaults to false)
This config option is defined by LayoutRegion.

### closeOnTab

`closeOnTab : Boolean`
True to place the close icon on the tabs instead of the region titlebar (defaults to false)
This config option is defined by LayoutRegion.

### cmargins

`cmargins : Object`
Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
This config option is defined by LayoutRegion.

### collapsed

`collapsed : Boolean`
True to set the initial display to collapsed (defaults to false)
This config option is defined by LayoutRegion.

### collapsedTitle

`collapsedTitle : String`
Optional string message to display in the collapsed block of a north or south region
This config option is defined by LayoutRegion.

### collapsible

`collapsible : Boolean`
False to disable collapsing (defaults to true)
This config option is defined by LayoutRegion.

### disableTabTips

`disableTabTips : Boolean`
True to disable tab tooltips
This config option is defined by LayoutRegion.

### floatable

`floatable : Boolean`
False to disable floating (defaults to true)
This config option is defined by LayoutRegion.

### hidden

`hidden : Boolean`
True to start the region hidden (defaults to false)
This config option is defined by LayoutRegion.

### hideTabs

`hideTabs : Boolean`
True to hide the tab strip (defaults to false)
This config option is defined by LayoutRegion.

### hideWhenEmpty

`hideWhenEmpty : Boolean`
True to hide the region when it has no panels
This config option is defined by LayoutRegion.

### margins

`margins : Object`
Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
This config option is defined by LayoutRegion.

### minTabWidth

`minTabWidth : Number`
The minimum tab width (defaults to 40)
This config option is defined by LayoutRegion.

### preferredTabWidth

`preferredTabWidth : Number`
The preferred tab width (defaults to 150)
This config option is defined by LayoutRegion.

### preservePanels

`preservePanels : Boolean`
True to preserve removed panels so they can be readded later (defaults to false)
This config option is defined by LayoutRegion.

### resizeTabs

`resizeTabs : Boolean`
True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within the space available, similar to FireFox 1.5 tabs (defaults to false)
This config option is defined by LayoutRegion.

### showPin

`showPin : Boolean`
True to show a pin button
This config option is defined by LayoutRegion.

### tabPosition

`tabPosition : String`
"top" or "bottom" (defaults to "bottom")
This config option is defined by LayoutRegion.

### title

`title : String`
The title for the region (overrides panel titles)
This config option is defined by LayoutRegion.

### titlebar

`titlebar : Boolean`
True to display a title bar (defaults to true)
This config option is defined by LayoutRegion.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.