Print Friendly

# Class Ext.BasicDialog

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

Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:

    var dlg = new Ext.BasicDialog("my-dlg", {
            height: 200,
            width: 300,
            minHeight: 100,
            minWidth: 150,
            modal: true,
            proxyDrag: true,
            shadow: true
        });
        dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
        dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
        dlg.addButton('Cancel', dlg.hide, dlg);
        dlg.show();

A Dialog should always be a direct child of the body element.
Properties - Methods - Events - Config Options

## Public Properties

Property | Defined By
--- | ---
| body : Ext.Element | BasicDialog
The body element
| buttons : Array | BasicDialog
Array of all the buttons that have been added to this dialog via addButton
| footer : Ext.Element | BasicDialog
The footer element
| header : Ext.Element | BasicDialog
The header element

## Public Methods

Method | Defined By
--- | ---
| BasicDialog(`String/HTMLElement/Ext.Element el`, `Object config`) | BasicDialog
Create a new BasicDialog.
| addButton(`String/Object config`, `Function handler`, [`Object scope`]) : Ext.Button | BasicDialog
Adds a button to the footer section of the dialog.
| addEvents(`Object object`) : void | Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
| addKeyListener(`Number/Array/Object key`, `Function fn`, [`Object scope`]) : Ext.BasicDialog | BasicDialog
Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be executed i...
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void | Observable
Appends an event handler to this component
| alignTo(`String/HTMLElement/Ext.Element element`, `String position`, [`Array offsets`]) : Ext.BasicDialog | BasicDialog
Aligns the dialog to the specified element
| anchorTo(`String/HTMLElement/Ext.Element element`, `String position`, [`Array offsets`], [`Boolean/Number monitorScroll`]) : Ext.BasicDialog | BasicDialog
Anchors an element to another element and realigns it when the window is resized.
| center() : Ext.BasicDialog | BasicDialog
Centers this dialog in the viewport
| collapse() : void | BasicDialog
Collapses the dialog to its minimized state (only the title bar is visible). Equivalent to the user clicking the coll...
| destroy([`Boolean removeEl`]) : void | BasicDialog
Destroys this dialog and all its supporting elements (including any tabs, shim, shadow, proxy, mask, etc.) Also remo...
| expand() : void | BasicDialog
Expands a collapsed dialog back to its normal state. Equivalent to the user clicking the expand dialog button.
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| focus() : void | BasicDialog
Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the dialog itself will receive focus.
| getEl() : Ext.Element | BasicDialog
Returns the element for this dialog
| getTabs() : Ext.TabPanel | BasicDialog
Returns the TabPanel component (creates it if it doesn't exist). Note: If you wish to simply check for the existence ...
| hasListener(`String eventName`) : Boolean | Observable
Checks to see if this object is currently listening for a specified event
| hide([`Function callback`]) : Ext.BasicDialog | BasicDialog
Hides the dialog.
| initTabs() : Ext.TabPanel | BasicDialog
Reinitializes the tabs component, clearing out old tabs and finding new ones.
| isVisible() : Boolean | BasicDialog
Returns true if the dialog is visible
| moveTo(`Number x`, `Number y`) : Ext.BasicDialog | BasicDialog
Moves the dialog's top-left corner to the specified point
| on(`String eventName`, `Function handler`, [`Object options`]) : 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`) : Ext.BasicDialog | BasicDialog
Resizes the dialog.
| restoreState() : Ext.BasicDialog | BasicDialog
Restores the previous state of the dialog if Ext.state is configured.
| setContentSize(`Number width`, `Number height`) : Ext.BasicDialog | BasicDialog
Resizes the dialog to fit the specified content size.
| setDefaultButton(`Ext.BasicDialog.Button btn`) : Ext.BasicDialog | BasicDialog
Sets the default button to be focused when the dialog is displayed.
| setTitle(`String text`) : Ext.BasicDialog | BasicDialog
Sets the dialog title text
| show([`String/HTMLElement/Ext.Element animateTarget`]) : Ext.BasicDialog | BasicDialog
Shows the dialog.
| toBack() : Ext.BasicDialog | BasicDialog
Sends this dialog to the back (under) of any other visible dialogs
| toFront() : Ext.BasicDialog | BasicDialog
Brings this dialog to the front of any other visible dialogs
| un(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener (shorthand for removeListener)

## Public Events

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

## Config Options

Config Options | Defined By
--- | ---
| animateTarget : String/Element | BasicDialog
Id or element from which the dialog should animate while opening (defaults to null with no animation)
| autoCreate : Boolean/DomHelper | BasicDialog
True to auto create from scratch, or using a DomHelper Object (defaults to false)
| autoScroll : Boolean | BasicDialog
True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
| autoTabs : Boolean | BasicDialog
If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
| buttonAlign : String | BasicDialog
Valid values are "left," "center" and "right" (defaults to "right")
| closable : Boolean | BasicDialog
False to remove the built-in top-right corner close button (defaults to true)
| collapsible : Boolean | BasicDialog
False to remove the built-in top-right corner collapse button (defaults to true)
| constraintoviewport : Boolean | BasicDialog
True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
| draggable : Boolean | BasicDialog
False to disable dragging of the dialog within the viewport (defaults to true)
| fixedcenter : Boolean | BasicDialog
True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
| height : Number | BasicDialog
Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
| minButtonWidth : Number | BasicDialog
Minimum width of all dialog buttons (defaults to 75)
| minHeight : Number | BasicDialog
The minimum allowable height for a resizable dialog (defaults to 80)
| minWidth : Number | BasicDialog
The minimum allowable width for a resizable dialog (defaults to 200)
| modal : Boolean | BasicDialog
True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
| proxyDrag : Boolean | BasicDialog
True to drag a lightweight proxy element rather than the dialog itself, used when draggable = true (defaults to false)
| resizable : Boolean | BasicDialog
False to disable manual dialog resizing (defaults to true)
| resizeHandles : String | BasicDialog
Which resize handles to display - see the Ext.Resizable handles config property for valid values (defaults to 'all')
| shadow : Boolean/String | BasicDialog
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to false)
| shadowOffset : Number | BasicDialog
The number of pixels to offset the shadow if displayed (defaults to 5)
| shim : Boolean | BasicDialog
True to create an iframe shim that prevents selects from showing through (defaults to false)
| syncHeightBeforeShow : Boolean | BasicDialog
True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
| tabTag : String | BasicDialog
The tag name of tab elements, used when autoTabs = true (defaults to 'div')
| title : String | BasicDialog
Default text to display in the title bar (defaults to null)
| width : Number | BasicDialog
Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
| x : Number | BasicDialog
The default top page coordinate of the dialog (defaults to center screen)
| y : Number | BasicDialog
The default left page coordinate of the dialog (defaults to center screen)

## Property Details

### body

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

### buttons

`public Array buttons`
Array of all the buttons that have been added to this dialog via addButton
This property is defined by BasicDialog.

### footer

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

### header

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

## Constructor Details

### BasicDialog

`public function BasicDialog(`String/HTMLElement/Ext.Element el`, `Object config`)`
Create a new BasicDialog.
Parameters:

- `el` : String/HTMLElement/Ext.Element
  The container element or DOM node, or its id
- `config` : Object
  Configuration options

## Method Details

### addButton

`public function addButton(`String/Object config`, `Function handler`, [`Object scope`])`
Adds a button to the footer section of the dialog.
Parameters:

- `config` : String/Object
  A string becomes the button text, an object can either be a Button config object or a valid Ext.DomHelper element config
- `handler` : Function
  The function called when the button is clicked
- `scope` : Object
  (optional) The scope of the handler function

Returns:

- `Ext.Button`
  this

This method is defined by BasicDialog.

### addEvents

`public function addEvents(`Object object`)`
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:

- `object` : Object
  The object from which to copy events

Returns:

- `void`

This method is defined by Observable.

### addKeyListener

`public function addKeyListener(`Number/Array/Object key`, `Function fn`, [`Object scope`])`
Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be executed in response to a particular key being pressed while the dialog is active.
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:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### 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.
  - delegate {String} A simple selector to filter the target or look for a descendant of the target
  - stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
  - preventDefault {Boolean} True to prevent the default action
  - stopPropagation {Boolean} True to prevent event propagation
  - normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
  - 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)

  Code:

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

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

  Attaching multiple handlers in 1 call
  Code:

      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:
  Code:

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

Returns:

- `void`

This method is defined by Observable.

### alignTo

`public function alignTo(`String/HTMLElement/Ext.Element element`, `String position`, [`Array offsets`])`
Aligns the dialog to the specified element
Parameters:

- `element` : String/HTMLElement/Ext.Element
  The element to align to.
- `position` : String
  The position to align to (see Ext.Element.alignTo for more details).
- `offsets` : Array
  (optional) Offset the positioning by [x, y]

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### anchorTo

`public function anchorTo(`String/HTMLElement/Ext.Element element`, `String position`, [`Array offsets`], [`Boolean/Number monitorScroll`])`
Anchors an element to another element and realigns it when the window is resized.
Parameters:

- `element` : String/HTMLElement/Ext.Element
  The element to align to.
- `position` : String
  The position to align to (see Ext.Element.alignTo for more details)
- `offsets` : Array
  (optional) Offset the positioning by [x, y]
- `monitorScroll` : Boolean/Number
  (optional) true to monitor body scroll and reposition. If this parameter is a number, it is used as the buffer delay (defaults to 50ms).

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### center

`public function center()`
Centers this dialog in the viewport
Parameters:

- None.

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### collapse

`public function collapse()`
Collapses the dialog to its minimized state (only the title bar is visible). Equivalent to the user clicking the collapse dialog button.
Parameters:

- None.

Returns:

- `void`

This method is defined by BasicDialog.

### destroy

`public function destroy([`Boolean removeEl`])`
Destroys this dialog and all its supporting elements (including any tabs, shim, shadow, proxy, mask, etc.) Also removes all event listeners.
Parameters:

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

Returns:

- `void`

This method is defined by BasicDialog.

### expand

`public function expand()`
Expands a collapsed dialog back to its normal state. Equivalent to the user clicking the expand dialog button.
Parameters:

- None.

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.

### focus

`public function focus()`
Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the dialog itself will receive focus.
Parameters:

- None.

Returns:

- `void`

This method is defined by BasicDialog.

### getEl

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

- None.

Returns:

- `Ext.Element`
  The underlying dialog Element

This method is defined by BasicDialog.

### getTabs

`public function getTabs()`
Returns the TabPanel component (creates it if it doesn't exist). Note: If you wish to simply check for the existence of tabs without creating them, check for a null 'tabs' property.
Parameters:

- None.

Returns:

- `Ext.TabPanel`
  The tabs component

This method is defined by BasicDialog.

### hasListener

`public function hasListener(`String eventName`)`
Checks to see if this object is currently listening 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.

### hide

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

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

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### initTabs

`public function initTabs()`
Reinitializes the tabs component, clearing out old tabs and finding new ones.
Parameters:

- None.

Returns:

- `Ext.TabPanel`
  The tabs component

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's top-left corner to the specified point
Parameters:

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

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### on

`public function on(`String eventName`, `Function handler`, [`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
- `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.

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

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### restoreState

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

- None.

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### setContentSize

`public function setContentSize(`Number width`, `Number height`)`
Resizes the dialog to fit the specified content size.
Parameters:

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

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### setDefaultButton

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

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

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### setTitle

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

- `text` : String
  The title text to display

Returns:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

### show

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

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

Returns:

- `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:

- `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:

- `Ext.BasicDialog`
  this

This method is defined by BasicDialog.

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

## Event Details

### beforehide

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

- `this` : 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` : 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` : 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` : Ext.BasicDialog
- `e` : 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` : 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` : 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` : Ext.BasicDialog

This event is defined by BasicDialog.

## Config Details

### animateTarget

`animateTarget : String/Element`
Id or element from which the dialog should animate while opening (defaults to null with no animation)
This config option is defined by BasicDialog.

### autoCreate

`autoCreate : Boolean/DomHelper`
True to auto create from scratch, or using a DomHelper Object (defaults to false)
This config option is defined by BasicDialog.

### autoScroll

`autoScroll : Boolean`
True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
This config option is defined by BasicDialog.

### autoTabs

`autoTabs : Boolean`
If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
This config option is defined by BasicDialog.

### buttonAlign

`buttonAlign : String`
Valid values are "left," "center" and "right" (defaults to "right")
This config option is defined by BasicDialog.

### closable

`closable : Boolean`
False to remove the built-in top-right corner close button (defaults to true)
This config option is defined by BasicDialog.

### collapsible

`collapsible : Boolean`
False to remove the built-in top-right corner collapse button (defaults to true)
This config option is defined by BasicDialog.

### constraintoviewport

`constraintoviewport : Boolean`
True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
This config option is defined by BasicDialog.

### draggable

`draggable : Boolean`
False to disable dragging of the dialog within the viewport (defaults to true)
This config option is defined by BasicDialog.

### fixedcenter

`fixedcenter : Boolean`
True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
This config option is defined by BasicDialog.

### height

`height : Number`
Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
This config option is defined by BasicDialog.

### minButtonWidth

`minButtonWidth : Number`
Minimum width of all dialog buttons (defaults to 75)
This config option is defined by BasicDialog.

### minHeight

`minHeight : Number`
The minimum allowable height for a resizable dialog (defaults to 80)
This config option is defined by BasicDialog.

### minWidth

`minWidth : Number`
The minimum allowable width for a resizable dialog (defaults to 200)
This config option is defined by BasicDialog.

### modal

`modal : Boolean`
True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
This config option is defined by BasicDialog.

### proxyDrag

`proxyDrag : Boolean`
True to drag a lightweight proxy element rather than the dialog itself, used when draggable = true (defaults to false)
This config option is defined by BasicDialog.

### resizable

`resizable : Boolean`
False to disable manual dialog resizing (defaults to true)
This config option is defined by BasicDialog.

### resizeHandles

`resizeHandles : String`
Which resize handles to display - see the Ext.Resizable handles config property for valid values (defaults to 'all')
This config option is defined by BasicDialog.

### shadow

`shadow : Boolean/String`
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to false)
This config option is defined by BasicDialog.

### shadowOffset

`shadowOffset : Number`
The number of pixels to offset the shadow if displayed (defaults to 5)
This config option is defined by BasicDialog.

### shim

`shim : Boolean`
True to create an iframe shim that prevents selects from showing through (defaults to false)
This config option is defined by BasicDialog.

### syncHeightBeforeShow

`syncHeightBeforeShow : Boolean`
True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
This config option is defined by BasicDialog.

### tabTag

`tabTag : String`
The tag name of tab elements, used when autoTabs = true (defaults to 'div')
This config option is defined by BasicDialog.

### title

`title : String`
Default text to display in the title bar (defaults to null)
This config option is defined by BasicDialog.

### width

`width : Number`
Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
This config option is defined by BasicDialog.

### x

`x : Number`
The default top page coordinate of the dialog (defaults to center screen)
This config option is defined by BasicDialog.

### y

`y : Number`
The default left page coordinate of the dialog (defaults to center screen)
This config option is defined by BasicDialog.

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