# Yahoo! UI Library

### Container 2.2.2

Yahoo! UI Library > container > YAHOO.widget.Panel

## Class YAHOO.widget.Panel - extends YAHOO.widget.Overlay

Known Subclasses:
  YAHOO.widget.Dialog

Panel is an implementation of Overlay that behaves like an OS window, with a draggable header and an optional close icon at the top right.

### Constructor

YAHOO.widget.Panel `( el , userConfig )`

Parameters:
  `el <String>` The element ID representing the Panel OR
  `el <HTMLElement>` The element representing the Panel
  `userConfig <Object>` The configuration object literal containing the configuration that should be set for this Panel. See configuration documentation for more details.

### Properties

#### YAHOO.widget.Panel._DEFAULT_CONFIG `- private final Object`

Constant representing the Panel's configuration properties

#### YAHOO.widget.Panel._EVENT_TYPES `- private final Object`

Constant representing the name of the Panel's events

#### YAHOO.widget.Panel.CSS_PANEL `- static final String`

Constant representing the default CSS class used for a Panel

#### YAHOO.widget.Panel.CSS_PANEL_CONTAINER `- static final String`

Constant representing the default CSS class used for a Panel's wrapping container

#### Properties inherited from YAHOO.widget.Module:

`body, browser, cfg, contructor, element, footer, header, id, imageRoot, isSecure, platform, YAHOO.widget.Module._DEFAULT_CONFIG, YAHOO.widget.Module._EVENT_TYPES`

#### Properties inherited from YAHOO.widget.Overlay:

`YAHOO.widget.Overlay._DEFAULT_CONFIG, YAHOO.widget.Overlay._EVENT_TYPES, YAHOO.widget.Overlay._initialized`

### Methods

#### buildMask

`void buildMask ( )`
Builds the mask that is laid over the document when the Panel is configured to be modal.

Returns: `void`

#### buildWrapper

`void buildWrapper ( )`
Builds the wrapping container around the Panel that is used for positioning the shadow and matte underlays. The container element is assigned to a local instance variable called container, and the element is reinserted inside of it.

Returns: `void`

#### configClose

`void configClose ( type , args , obj )`
The default event handler fired when the "close" property is changed. The method controls the appending or hiding of the close icon at the top right of the Panel.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configDraggable

`void configDraggable ( type , args , obj )`
The default event handler fired when the "draggable" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configHeight

`void configHeight ( type , args , obj )`
The default event handler fired when the "height" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configKeyListeners

`void configKeyListeners ( type , args , obj )`
The default event handler fired when the "keylisteners" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configModal

`void configModal ( type , args , obj )`
The default event handler fired when the "modal" property is changed. This handler subscribes or unsubscribes to the show and hide events to handle the display or hide of the modality mask.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configUnderlay

`void configUnderlay ( type , args , obj )`
The default event handler fired when the "underlay" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configWidth

`void configWidth ( type , args , obj )`
The default event handler fired when the "width" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### configzIndex

`void configzIndex ( type , args , obj )`
The default event handler fired when the "zIndex" property is changed.

Parameters:
  `type <String>` The CustomEvent type (usually the property name)
  `args <Object[]>` The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
  `obj <Object>` The scope object. For configuration handlers, this will usually equal the owner.

Returns: `void`

#### destroy

`void destroy ( )`
Removes the Panel element from the DOM and sets all child elements to null.

Returns: `void`

#### hideMask

`void hideMask ( )`
Hides the modality mask.

Returns: `void`

#### init

`void init ( el , userConfig )`
The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatically called by the constructor, and sets up all DOM references for pre-existing markup, and creates required markup if it is not already present.

Parameters:
  `el <String>` The element ID representing the Overlay OR
  `el <HTMLElement>` The element representing the Overlay
  `userConfig <Object>` The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

Returns: `void`

#### initDefaultConfig

`void initDefaultConfig ( )`
Initializes the class's configurable properties which can be changed using the Panel's Config object (cfg).

Returns: `void`

#### initEvents

`void initEvents ( )`
Initializes the custom events for Module which are fired automatically at appropriate times by the Module class.

Returns: `void`

#### onDomResize

`void onDomResize ( e , obj )`
Event handler fired when the resize monitor element is resized.

Parameters:
  `e <DOMEvent>` The resize DOM event
  `obj <Object>` The scope object

Returns: `void`

#### registerDragDrop

`void registerDragDrop ( )`
Registers the Panel's header for drag & drop capability.

Returns: `void`

#### removeMask

`void removeMask ( )`
Removes the modality mask.

Returns: `void`

#### render

`boolean render ( appendToNode )`
Renders the Panel by inserting the elements that are not already in the main Panel into their correct places. Optionally appends the Panel to the specified node prior to the render's execution. NOTE: For Panels without existing markup, the appendToNode argument is REQUIRED. If this argument is ommitted and the current element is not present in the document, the function will return false, indicating that the render was a failure.

Parameters:
  `appendToNode <String>` The element id to which the Module should be appended to prior to rendering OR
  `appendToNode <HTMLElement>` The element to which the Module should be appended to prior to rendering

Returns: `boolean`
  Success or failure of the render

#### showMask

`void showMask ( )`
Shows the modality mask.

Returns: `void`

#### sizeMask

`void sizeMask ( )`
Sets the size of the modality mask to cover the entire scrollable area of the document

Returns: `void`

#### sizeUnderlay

`void sizeUnderlay ( )`
Adjusts the size of the shadow based on the size of the element.

Returns: `void`

#### toString

`String toString ( )`
Returns a String representation of the object.

Returns: `String`
  The string representation of the Panel.

#### Methods inherited from YAHOO.widget.Module:

`appendToBody, appendToFooter, appendToHeader, configMonitorResize, configVisible, destroy, hide, init, initDefaultConfig, initEvents, initResizeMonitor, onDomResize, render, setBody, setFooter, setHeader, show, toString`

#### Methods inherited from YAHOO.widget.Overlay:

`align, center, configConstrainToViewport, configContext, configFixedCenter, configHeight, configIframe, configVisible, configWidth, configX, configXY, configY, configzIndex, destroy, doCenterOnDOMEvent, enforceConstraints, hideIframe, hideMacGeckoScrollbars, init, initDefaultConfig, initEvents, moveTo, onDomResize, showIframe, showMacGeckoScrollbars, syncPosition, toString`

### Events

#### dragEvent

`dragEvent ( )`
CustomEvent when the Panel is dragged

#### hideMaskEvent

`hideMaskEvent ( )`
CustomEvent fired after the modality mask is hidden

#### showMaskEvent

`showMaskEvent ( )`
CustomEvent fired after the modality mask is shown

#### Events inherited from YAHOO.widget.Module:

`appendEvent, beforeHideEvent, beforeInitEvent, beforeRenderEvent, beforeShowEvent, changeBodyEvent, changeContentEvent, changeFooterEvent, changeHeaderEvent, destroyEvent, hideEvent, initEvent, renderEvent, showEvent, YAHOO.widget.Module.textResizeEvent`

#### Events inherited from YAHOO.widget.Overlay:

`beforeMoveEvent, moveEvent, YAHOO.widget.Overlay.windowResizeEvent, YAHOO.widget.Overlay.windowScrollEvent`

### Configuration Attributes

#### close `- Boolean`

True if the Panel should display a "close" button
Default Value: true

#### draggable `- Boolean`

True if the Panel should be draggable. Default value is "true" if the Drag and Drop utility is included, otherwise it is "false."
Default Value: true

#### keylisteners `- YAHOO.util.KeyListener[]`

A KeyListener (or array of KeyListeners) that will be enabled when the Panel is shown, and disabled when the Panel is hidden.
Default Value: null

#### modal `- Boolean`

True if the Panel should be displayed in a modal fashion, automatically creating a transparent mask over the document that will not be removed until the Panel is dismissed.
Default Value: false

#### underlay `- String`

Sets the type of underlay to display for the Panel. Valid values are "shadow", "matte", and "none".
Default Value: shadow

#### Configuration attributes inherited from YAHOO.widget.Module:

`effect, monitorresize, visible`

#### Configuration attributes inherited from YAHOO.widget.Overlay:

`constraintoviewport, context, fixedcenter, height, iframe, width, x, xy, y, zIndex`

Copyright © 2007 Yahoo! Inc. All rights reserved.