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
  BasicDialogString/HTMLElement/Ext.Element el, Object config ) BasicDialog
Create a new BasicDialog.
  addButtonString/Object config, Function handler, [Object scope] ) : Ext.Button BasicDialog
Adds a button to the footer section of the dialog.
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addKeyListenerNumber/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...
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  alignToString/HTMLElement/Ext.Element element, String position, [Array offsets] ) : Ext.BasicDialog BasicDialog
Aligns the dialog to the specified element
  anchorToString/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.
  fireEventString 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 ...
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners 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
  moveToNumber x, Number y ) : Ext.BasicDialog BasicDialog
Moves the dialog's top-left corner to the specified point
  onString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  resizeToNumber 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.
  setContentSizeNumber width, Number height ) : Ext.BasicDialog BasicDialog
Resizes the dialog to fit the specified content size.
  setDefaultButtonExt.BasicDialog.Button btn ) : Ext.BasicDialog BasicDialog
Sets the default button to be focused when the dialog is displayed.
  setTitleString 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
  unString 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 left page coordinate of the dialog (defaults to center screen)
  y : Number BasicDialog
The default top 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
    The new button
This method is defined by BasicDialog.

addEvents

public function addEvents( Object object )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
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.
    • 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)

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

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

    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 which passes the same scope object to all handlers:

    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 has any listeners 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 scope], [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
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • 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 left page coordinate of the dialog (defaults to center screen)
This config option is defined by BasicDialog.

y

y : Number
The default top 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.