Print Friendly

# Class YAHOO.ext.LayoutDialog

Package: | YAHOO.ext
Class: | LayoutDialog
Extends: | BasicDialog
Defined In: | BasicDialog.js

Dialog which provides adjustments for working with a layout in a Dialog. Add your neccessary layout config options to the dialogs config.
Example Usage (including a nested layout):

        if(!dialog){
        dialog = new YAHOO.ext.LayoutDialog("download-dlg", {
                modal: true,
                width:600,
                height:450,
                shadow:true,
                minWidth:500,
                minHeight:350,
                autoTabs:true,
                proxyDrag:true,
                // layout config merges with the dialog config
                center:{
                    tabPosition: 'top',
                    alwaysShowTabs: true
                }
        });
        dialog.addKeyListener(27, dialog.hide, dialog);
        dialog.setDefaultButton(dialog.addButton('Close', dialog.hide, dialog));
        dialog.addButton('Build It!', this.getDownload, this);

        // we can even add nested layouts
        var innerLayout = new YAHOO.ext.BorderLayout('dl-inner', {
            east: {
                initialSize: 200,
                autoScroll:true,
                split:true
            },
            center: {
                autoScroll:true
            }
        });
        innerLayout.beginUpdate();
        innerLayout.add('east', new YAHOO.ext.ContentPanel('dl-details'));
        innerLayout.add('center', new YAHOO.ext.ContentPanel('selection-panel'));
        innerLayout.endUpdate(true);

        // when doing updates to the top level layout in a dialog, you need to
        // use dialog.beginUpdate()/endUpdate() instead of layout.beginUpdate()/endUpdate()
        var layout = dialog.getLayout();
        dialog.beginUpdate();
        layout.add('center', new YAHOO.ext.ContentPanel('standard-panel',
                            {title: 'Download the Source', fitToFrame:true}));
        layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout,
                   {title: 'Build your own yui-ext.js'}));
        layout.getRegion('center').showPanel(sp);
        dialog.endUpdate();

## Public Properties

Property | Defined By
--- | ---
| body : YAHOO.ext.Element | BasicDialog
The body element
| footer : YAHOO.ext.Element | BasicDialog
The footer element
| header : YAHOO.ext.Element | BasicDialog
The header element
| zseed : Number | BasicDialog
The starting z-index for BasicDialogs - defaults to 10000

## Public Methods

Method | Defined By
--- | ---
| LayoutDialog(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`) | LayoutDialog
| addButton(`String/Object config`, `Function handler`, [`Object scope`]) : YAHOO.ext.BasicDialog.Button | BasicDialog
Adds a button.
| addKeyListener(`Number/Array/Object key`, `Function fn`, [`Object scope`]) : YAHOO.ext.BasicDialog | BasicDialog
Adds a key listener for when this dialog is displayed
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element
| beginUpdate() : void | LayoutDialog
Deprecated. Begins an update of the layout and sets display to block and visibility to hidden. Use standard beginUpda...
| bringToFront(`String/Object dlg`) : YAHOO.ext.BasicDialog | BasicDialog
Brings the specified dialog to the front
| center() : YAHOO.ext.BasicDialog | BasicDialog
Centers this dialog
| 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.
| destroy([`Boolean removeEl`]) : void | BasicDialog
Destroys this dialog
| endUpdate() : void | LayoutDialog
Deprecated. Ends update of the layout and resets display to none. Use standard beginUpdate/endUpdate on the layout.
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| get(`String/Object id`) : YAHOO.ext.BasicDialog | BasicDialog
Gets a registered dialog by id
| getEl() : YAHOO.ext.Element | BasicDialog
Returns the element for this dialog
| getLayout() : YAHOO.ext.BorderLayout | LayoutDialog
Get the BorderLayout for this dialog
| getTabs() : YAHOO.ext.TabPanel | BasicDialog
Returns the TabPanel component (if autoTabs)
| hide([`Function callback`]) : YAHOO.ext.BasicDialog | BasicDialog
Hides the dialog.
| isVisible() : Boolean | BasicDialog
Returns true if the dialog is visible
| moveTo(`Number x`, `Number y`) : YAHOO.ext.BasicDialog | BasicDialog
Moves the dialog to the specified point
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| resizeTo(`Number width`, `Number height`) : YAHOO.ext.BasicDialog | BasicDialog
Resizes the dialog.
| restoreState() : YAHOO.ext.BasicDialog | BasicDialog
Restores the previous state of the dialog if YAHOO.ext.state is configured
| sendToBack(`String/Object dlg`) : YAHOO.ext.BasicDialog | BasicDialog
Sends the specified dialog to the back
| setDefaultButton(`YAHOO.ext.BasicDialog.Button btn`) : YAHOO.ext.BasicDialog | BasicDialog
Sets the default button to be focused when the dialog is displayed
| show([`String/HTMLElement/YAHOO.ext.Element animateTarget`]) : YAHOO.ext.BasicDialog | BasicDialog
Shows the dialog.
| toBack() : YAHOO.ext.BasicDialog | BasicDialog
Sends this dialog to the back (under) of any other visible dialogs
| toFront() : YAHOO.ext.BasicDialog | BasicDialog
Brings this dialog to the front of any other visible dialogs

## Public Events

Event | Defined By
--- | ---
| beforehide : (`YAHOO.ext.BasicDialog this`) | BasicDialog
Fires before this dialog is hidden.
| beforeshow : (`YAHOO.ext.BasicDialog this`) | BasicDialog
Fires before this dialog is shown.
| hide : (`YAHOO.ext.BasicDialog this`) | BasicDialog
Fires when this dialog is hidden.
| keydown : (`YAHOO.ext.BasicDialog this`, `YAHOO.ext.EventObject e`) | BasicDialog
Fires when a key is pressed
| move : (`YAHOO.ext.BasicDialog this`, `Number x`, `Number y`) | BasicDialog
Fires when this dialog is moved by the user.
| resize : (`YAHOO.ext.BasicDialog this`, `Number width`, `Number height`) | BasicDialog
Fires when this dialog is resized by the user.
| show : (`YAHOO.ext.BasicDialog this`) | BasicDialog
Fires when this dialog is shown.

## Property Details

### body

`public YAHOO.ext.Element body`
The body element
This property is defined by BasicDialog.

### footer

`public YAHOO.ext.Element footer`
The footer element
This property is defined by BasicDialog.

### header

`public YAHOO.ext.Element header`
The header element
This property is defined by BasicDialog.

### zseed

`public Number zseed`
The starting z-index for BasicDialogs - defaults to 10000
This property is defined by BasicDialog.

## Constructor Details

### LayoutDialog

`public function LayoutDialog(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`)`
Parameters:

- `el` : String/HTMLElement/YAHOO.ext.Element
  The id of or container element
- `config` : Object
  configuration options

## Method Details

### addButton

`public function addButton(`String/Object config`, `Function handler`, [`Object scope`])`
Adds a button.
Parameters:

- `config` : String/Object
  A string becomes the button text, an object is expected to be a valid YAHOO.ext.DomHelper element config
- `handler` : Function
  The function called when the button is clicked
- `scope` : Object
  (optional) The scope of the handler function

Returns:

- `YAHOO.ext.BasicDialog.Button`

This method is defined by BasicDialog.

### addKeyListener

`public function addKeyListener(`Number/Array/Object key`, `Function fn`, [`Object scope`])`
Adds a key listener for when this dialog is displayed
Parameters:

- `key` : Number/Array/Object
  Either the numeric key code, array of key codes or an object with the following options: {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
- `fn` : Function
  The function to call
- `scope` : Object
  (optional) The scope of the function

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

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

### beginUpdate

`public function beginUpdate()`
Deprecated. Begins an update of the layout and sets display to block and visibility to hidden. Use standard beginUpdate/endUpdate on the layout.
Parameters:

- None.

Returns:

- `void`

This method is defined by LayoutDialog.

### bringToFront

`public function bringToFront(`String/Object dlg`)`
Brings the specified dialog to the front
Parameters:

- `dlg` : String/Object
  The id of the dialog or a dialog

Returns:

- `YAHOO.ext.BasicDialog`

This method is defined by BasicDialog.

### center

`public function center()`
Centers this dialog
Parameters:

- None.

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

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

### destroy

`public function destroy([`Boolean removeEl`])`
Destroys this dialog
Parameters:

- `removeEl` : Boolean
  (optional) true to remove the element from the DOM

Returns:

- `void`

This method is defined by BasicDialog.

### endUpdate

`public function endUpdate()`
Deprecated. Ends update of the layout and resets display to none. Use standard beginUpdate/endUpdate on the layout.
Parameters:

- None.

Returns:

- `void`

This method is defined by LayoutDialog.

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

### get

`public function get(`String/Object id`)`
Gets a registered dialog by id
Parameters:

- `id` : String/Object
  The id of the dialog or a dialog

Returns:

- `YAHOO.ext.BasicDialog`

This method is defined by BasicDialog.

### getEl

`public function getEl()`
Returns the element for this dialog
Parameters:

- None.

Returns:

- `YAHOO.ext.Element`

This method is defined by BasicDialog.

### getLayout

`public function getLayout()`
Get the BorderLayout for this dialog
Parameters:

- None.

Returns:

- `YAHOO.ext.BorderLayout`

This method is defined by LayoutDialog.

### getTabs

`public function getTabs()`
Returns the TabPanel component (if autoTabs)
Parameters:

- None.

Returns:

- `YAHOO.ext.TabPanel`

This method is defined by BasicDialog.

### hide

`public function hide([`Function callback`])`
Hides the dialog.
Parameters:

- `callback` : Function
  (optional) Function to call when the dialog is hidden

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### isVisible

`public function isVisible()`
Returns true if the dialog is visible
Parameters:

- None.

Returns:

- `Boolean`

This method is defined by BasicDialog.

### moveTo

`public function moveTo(`Number x`, `Number y`)`
Moves the dialog to the specified point
Parameters:

- `x` : Number
- `y` : Number

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### purgeListeners

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

- None.

Returns:

- `void`

This method is defined by Observable.

### 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 width`, `Number height`)`
Resizes the dialog.
Parameters:

- `width` : Number
- `height` : Number

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### restoreState

`public function restoreState()`
Restores the previous state of the dialog if YAHOO.ext.state is configured
Parameters:

- None.

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### sendToBack

`public function sendToBack(`String/Object dlg`)`
Sends the specified dialog to the back
Parameters:

- `dlg` : String/Object
  The id of the dialog or a dialog

Returns:

- `YAHOO.ext.BasicDialog`

This method is defined by BasicDialog.

### setDefaultButton

`public function setDefaultButton(`YAHOO.ext.BasicDialog.Button btn`)`
Sets the default button to be focused when the dialog is displayed
Parameters:

- `btn` : YAHOO.ext.BasicDialog.Button
  The button object returned by addButton

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### show

`public function show([`String/HTMLElement/YAHOO.ext.Element animateTarget`])`
Shows the dialog.
Parameters:

- `animateTarget` : String/HTMLElement/YAHOO.ext.Element
  (optional) Reset the animation target

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### toBack

`public function toBack()`
Sends this dialog to the back (under) of any other visible dialogs
Parameters:

- None.

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

### toFront

`public function toFront()`
Brings this dialog to the front of any other visible dialogs
Parameters:

- None.

Returns:

- `YAHOO.ext.BasicDialog`
  this

This method is defined by BasicDialog.

## Event Details

### beforehide

`public event beforehide`
Fires before this dialog is hidden.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog

This event is defined by BasicDialog.

### beforeshow

`public event beforeshow`
Fires before this dialog is shown.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog

This event is defined by BasicDialog.

### hide

`public event hide`
Fires when this dialog is hidden.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog

This event is defined by BasicDialog.

### keydown

`public event keydown`
Fires when a key is pressed
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog
- `e` : YAHOO.ext.EventObject

This event is defined by BasicDialog.

### move

`public event move`
Fires when this dialog is moved by the user.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog
- `x` : Number
  The new page X
- `y` : Number
  The new page Y

This event is defined by BasicDialog.

### resize

`public event resize`
Fires when this dialog is resized by the user.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog
- `width` : Number
  The new width
- `height` : Number
  The new height

This event is defined by BasicDialog.

### show

`public event show`
Fires when this dialog is shown.
Subscribers will be called with the following parameters:

- `this` : YAHOO.ext.BasicDialog

This event is defined by BasicDialog.

Copyright © 2006 Jack Slocum. All rights reserved.