Print Friendly

# Class YAHOO.ext.BasicDialog

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

Lightweight Dialog Class. The code below lists all configuration options along with the default value. If the default value is what you want you can leave it out:

    var dlg = new YAHOO.ext.BasicDialog('element-id', {
           autoCreate: false, (true to auto create from scratch, or DomHelper Object)
           title: null, (title to set at config time)
           width: (css),
           height: (css),
           x: 200, //(defaults to center screen if blank)
           y: 500, //(defaults to center screen if blank)
           animateTarget: null,// (no animation) This is the id or element to animate from
           resizable: true,
           minHeight: 80,
           minWidth: 200,
           modal: false,
           autoScroll: true,
           closable: true,
           constraintoviewport: true,
           draggable: true,
           autoTabs: false, (if true searches child nodes for elements with class ydlg-tab and converts them to tabs)
           tabTag: 'div', // the tag name of tab elements
           proxyDrag: false, (drag a proxy element rather than the dialog itself)
           fixedcenter: false,
           shadow: false,
           minButtonWidth: 75,
           shim: false // true to create an iframe shim to
                       // keep selects from showing through
      });

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

## Public Methods

Method | Defined By
--- | ---
| BasicDialog(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`) | BasicDialog
Create a new BasicDialog.
| addButton(`String/Object config`, `Function handler`, [`Object scope`]) : YAHOO.ext.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 component
| bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`]) : Function | Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
| 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 component that is delayed the specified number of milliseconds. This is useful for e...
| destroy([`Boolean removeEl`]) : void | BasicDialog
Destroys this dialog
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getEl() : YAHOO.ext.Element | BasicDialog
Returns the element 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
| on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| 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
| setDefaultButton(`YAHOO.ext.BasicDialog.Button btn`) : YAHOO.ext.BasicDialog | BasicDialog
Sets the default button to be focused when the dialog is displayed
| setTitle(`String text`) : YAHOO.ext.BasicDialog | BasicDialog
Sets the dialog title.
| 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.

## Constructor Details

### BasicDialog

`public function BasicDialog(`String/HTMLElement/YAHOO.ext.Element el`, `Object config`)`
Create a new BasicDialog.
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.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 component
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.

### bufferedListener

`public function bufferedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number millis`])`
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
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
- `millis` : Number
  (optional) The number of milliseconds to buffer (defaults to 250)

Returns:

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

This method is defined by Observable.

### 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 component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
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 (defaults to 1 millisecond)

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.

### 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 for this dialog
Parameters:

- None.

Returns:

- `YAHOO.ext.Element`

This method is defined by BasicDialog.

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

### on

`public function on(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
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 (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

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.

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

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

### setTitle

`public function setTitle(`String text`)`
Sets the dialog title.
Parameters:

- `text` : String

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.

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.