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.
|
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 |
Used to define events on this Observable |
|
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 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 |
|
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 scope ], [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) |
|
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. |
|
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) |
addButton
public function addButton( String/Object config
, Function handler
, [Object scope
] )
Adds a button to the footer section of the dialog.
Parameters:
config
: String/ObjectA string becomes the button text, an object can either be a Button config
object or a valid Ext.DomHelper element config
handler
: FunctionThe function called when the button is clicked
scope
: Object(optional) The scope of the handler function
Returns:
This method is defined by BasicDialog.
addEvents
public function addEvents( Object object
)
Used to define events on this 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/ObjectEither 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
: FunctionThe function to call
scope
: Object(optional) The scope of the function
Returns:
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
: StringThe type of event to listen for
handler
: FunctionThe 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:
alignTo
public function alignTo( String/HTMLElement/Ext.Element element
, String position
, [Array offsets
] )
Aligns the dialog to the specified element
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.ElementThe element to align to.
position
: Stringoffsets
: 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:
This method is defined by BasicDialog.
center
public function center()
Centers this dialog in the viewport
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.
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.
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.
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).
focus
public function focus()
Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
dialog itself will receive focus.
This method is defined by BasicDialog.
getEl
public function getEl()
Returns the element for this dialog
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:
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
hide
public function hide( [Function callback
] )
This method is defined by BasicDialog.
initTabs
public function initTabs()
Reinitializes the tabs component, clearing out old tabs and finding new ones.
Parameters:
Returns:
Ext.TabPanel
The tabs component
This method is defined by BasicDialog.
isVisible
public function isVisible()
Returns true if the dialog is visible
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
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
: StringThe type of event to listen for
handler
: FunctionThe 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:
purgeListeners
public function purgeListeners()
Removes all listeners for this object
removeListener
public function removeListener( String eventName
, Function handler
, [Object scope
] )
resizeTo
public function resizeTo( Number width
, Number height
)
Resizes the dialog.
Parameters:
width
: Numberheight
: Number
Returns:
This method is defined by BasicDialog.
restoreState
public function restoreState()
Restores the previous state of the dialog if Ext.state is configured.
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
: Numberheight
: Number
Returns:
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
Returns:
This method is defined by BasicDialog.
setTitle
public function setTitle( String text
)
Sets the dialog title text
This method is defined by BasicDialog.
show
public function show( [String/HTMLElement/Ext.Element animateTarget
] )
This method is defined by BasicDialog.
toBack
public function toBack()
Sends this dialog to the back (under) of any other visible dialogs
This method is defined by BasicDialog.
toFront
public function toFront()
Brings this dialog to the front of any other visible dialogs
This method is defined by BasicDialog.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)
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.