Print Friendly

# Class YAHOO.ext.BorderLayout

Package: | YAHOO.ext
Class: | BorderLayout
Extends: | LayoutManager
Defined In: | BorderLayout.js

This class represents a common layout manager used in desktop applications. For screenshots and more details, please see:
Cross Browser Layouts - Part 1
Cross Browser Layouts - Part 2
Example:

     var layout = new YAHOO.ext.BorderLayout(document.body, {
        north: {
            initialSize: 25,
            titlebar: false
        },
        west: {
            split:true,
            initialSize: 200,
            minSize: 175,
            maxSize: 400,
            titlebar: true,
            collapsible: true
        },
        east: {
            split:true,
            initialSize: 202,
            minSize: 175,
            maxSize: 400,
            titlebar: true,
            collapsible: true
        },
        south: {
            split:true,
            initialSize: 100,
            minSize: 100,
            maxSize: 200,
            titlebar: true,
            collapsible: true
        },
        center: {
            titlebar: true,
            autoScroll:true,
            resizeTabs: true,
            minTabWidth: 50,
            preferredTabWidth: 150
        }
    });

    // shorthand
    var CP = YAHOO.ext.ContentPanel;

    layout.beginUpdate();
    layout.add('north', new CP('north', 'North'));
    layout.add('south', new CP('south', {title: 'South', closable: true}));
    layout.add('west', new CP('west', {title: 'West'}));
    layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true}));
    layout.add('center', new CP('center1', {title: 'Close Me', closable: true}));
    layout.add('center', new CP('center2', {title: 'Center Panel', closable: false}));
    layout.getRegion('center').showPanel('center1');
    layout.endUpdate();

## Public Properties

Property | Defined By
--- | ---
| hideOnLayout : Boolean | BorderLayout
True to hide the center panel while performing layouts. This helps when the center region contains heavy components ...
| monitorWindowResize : Boolean | LayoutManager
false to disable window resize monitoring

## Public Methods

Method | Defined By
--- | ---
| BorderLayout(`String/HTMLElement/Element container`, `Object config`) | BorderLayout
Create a new BorderLayout
| add(`String target`, `YAHOO.ext.ContentPanel panel`) : YAHOO.ext.ContentPanel | BorderLayout
Adds a ContentPanel (or subclass) to this layout.
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element
| addRegion(`String target`, `Object config`) : BorderLayoutRegion | BorderLayout
Creates and adds a new region if it doesn't already exist.
| beginUpdate() : void | LayoutManager
Suspend the LayoutManager from doing auto-layouts while making multiple add or remove calls
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this element that is delayed the specified number of milliseconds.
| endUpdate(`Boolean noLayout`) : void | LayoutManager
Restore auto-layouts and optionally disable the manager from performing a layout
| findPanel(`String panelId`) : YAHOO.ext.ContentPanel | BorderLayout
Searches all regions for a panel with the specified id
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getEl() : YAHOO.ext.Element | LayoutManager
Returns the element this layout is bound to.
| getRegion(`String target`) : YAHOO.ext.LayoutRegion | LayoutManager
Returns the specified region.
| getViewSize() : Object | LayoutManager
Returns the size of the current view, This method normalizes document.body and element embedded layouts and performs ...
| isUpdating() : Boolean | LayoutManager
Returns true if this layout is currently being updated
| layout() : void | BorderLayout
Performs a layout update.
| purgeListeners() : void | Observable
Removes all listeners for this object
| remove(`String target`, `Number/String/YAHOO.ext.ContentPanel panel`) : YAHOO.ext.ContentPanel | BorderLayout
Adds a ContentPanel (or subclass) to this layout.
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| restoreState([`YAHOO.ext.state.Provider provider`]) : void | BorderLayout
Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider.
| showPanel(`String/ContentPanel panelId`) : YAHOO.ext.ContentPanel | BorderLayout
Searches all regions for a panel with the specified id and activates (shows) it.

## Public Events

Event | Defined By
--- | ---
| layout : (`YAHOO.ext.LayoutManager this`) | LayoutManager
Fires when a layout is performed.
| regioncollapsed : (`YAHOO.ext.LayoutRegion region`) | LayoutManager
Fires when a region is collapsed.
| regionexpanded : (`YAHOO.ext.LayoutRegion region`) | LayoutManager
Fires when a region is expanded.
| regionresized : (`YAHOO.ext.LayoutRegion region`, `Number newSize`) | LayoutManager
Fires when the user resizes a region.

## Property Details

### hideOnLayout

`public Boolean hideOnLayout`
True to hide the center panel while performing layouts. This helps when the center region contains heavy components such as a yui-ext grid.
This property is defined by BorderLayout.

### monitorWindowResize

`public Boolean monitorWindowResize`
false to disable window resize monitoring
This property is defined by LayoutManager.

## Constructor Details

### BorderLayout

`public function BorderLayout(`String/HTMLElement/Element container`, `Object config`)`
Create a new BorderLayout
Parameters:

- `container` : String/HTMLElement/Element
  The container this layout is bound to
- `config` : Object
  Configuration options

## Method Details

### add

`public function add(`String target`, `YAHOO.ext.ContentPanel panel`)`
Adds a ContentPanel (or subclass) to this layout.
Parameters:

- `target` : String
  The target region key (north, south, east, west or center).
- `panel` : YAHOO.ext.ContentPanel
  The panel to add

Returns:

- `YAHOO.ext.ContentPanel`
  The added panel

This method is defined by BorderLayout.

### addListener

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

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

Returns:

- `void`

This method is defined by Observable.

### addRegion

`public function addRegion(`String target`, `Object config`)`
Creates and adds a new region if it doesn't already exist.
Parameters:

- `target` : String
  The target region key (north, south, east, west or center).
- `config` : Object
  The regions config object

Returns:

- `BorderLayoutRegion`
  The new region

This method is defined by BorderLayout.

### beginUpdate

`public function beginUpdate()`
Suspend the LayoutManager from doing auto-layouts while making multiple add or remove calls
Parameters:

- None.

Returns:

- `void`

This method is defined by LayoutManager.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this element that is delayed the specified number of milliseconds.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `delay` : Number
  (optional) The number of milliseconds to delay

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

### endUpdate

`public function endUpdate(`Boolean noLayout`)`
Restore auto-layouts and optionally disable the manager from performing a layout
Parameters:

- `noLayout` : Boolean
  true to disable a layout update

Returns:

- `void`

This method is defined by LayoutManager.

### findPanel

`public function findPanel(`String panelId`)`
Searches all regions for a panel with the specified id
Parameters:

- `panelId` : String

Returns:

- `YAHOO.ext.ContentPanel`
  The panel or null if it wasn't found

This method is defined by BorderLayout.

### 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.

### getEl

`public function getEl()`
Returns the element this layout is bound to.
Parameters:

- None.

Returns:

- `YAHOO.ext.Element`

This method is defined by LayoutManager.

### getRegion

`public function getRegion(`String target`)`
Returns the specified region.
Parameters:

- `target` : String
  The region key

Returns:

- `YAHOO.ext.LayoutRegion`

This method is defined by LayoutManager.

### getViewSize

`public function getViewSize()`
Returns the size of the current view, This method normalizes document.body and element embedded layouts and performs box-model adjustments.
Parameters:

- None.

Returns:

- `Object`
  The size as an object {width: (the width), height: (the height)}

This method is defined by LayoutManager.

### isUpdating

`public function isUpdating()`
Returns true if this layout is currently being updated
Parameters:

- None.

Returns:

- `Boolean`

This method is defined by LayoutManager.

### layout

`public function layout()`
Performs a layout update.
Parameters:

- None.

Returns:

- `void`

This method is defined by BorderLayout.

### purgeListeners

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

- None.

Returns:

- `void`

This method is defined by Observable.

### remove

`public function remove(`String target`, `Number/String/YAHOO.ext.ContentPanel panel`)`
Adds a ContentPanel (or subclass) to this layout.
Parameters:

- `target` : String
  The target region key (north, south, east, west or center).
- `panel` : Number/String/YAHOO.ext.ContentPanel
  The index, id or panel to remove

Returns:

- `YAHOO.ext.ContentPanel`
  The removed panel

This method is defined by BorderLayout.

### 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.

### restoreState

`public function restoreState([`YAHOO.ext.state.Provider provider`])`
Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider.
Parameters:

- `provider` : YAHOO.ext.state.Provider
  (optional) An alternate state provider

Returns:

- `void`

This method is defined by BorderLayout.

### showPanel

`public function showPanel(`String/ContentPanel panelId`)`
Searches all regions for a panel with the specified id and activates (shows) it.
Parameters:

- `panelId` : String/ContentPanel
  The panels id or the panel itself

Returns:

- `YAHOO.ext.ContentPanel`
  The shown panel or null

This method is defined by BorderLayout.

## Event Details

### layout

`public event layout`
Fires when a layout is performed.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.LayoutManager

This event is defined by LayoutManager.

### regioncollapsed

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

- `region` : YAHOO.ext.LayoutRegion

This event is defined by LayoutManager.

### regionexpanded

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

- `region` : YAHOO.ext.LayoutRegion

This event is defined by LayoutManager.

### regionresized

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

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

This event is defined by LayoutManager.

Copyright © 2006 Jack Slocum. All rights reserved.