Class Ext.LayoutDialog

Package:	Ext
Class:	LayoutDialog
Extends:	BasicDialog
Defined In:	BasicDialog.js

Dialog which provides adjustments for working with a layout in a Dialog. Add your necessary layout config options to the dialog's config.
Example usage (including a nested layout):

if(!dialog){
    dialog = new Ext.LayoutDialog("download-dlg", {
        modal: true,
        width:600,
        height:450,
        shadow:true,
        minWidth:500,
        minHeight:350,
        autoTabs:true,
        proxyDrag:true,
        // layout config merges with the dialog config
        center:{
            tabPosition: "top",
            alwaysShowTabs: true
        }
    });
    dialog.addKeyListener(27, dialog.hide, dialog);
    dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
    dialog.addButton("Build It!", this.getDownload, this);

    // we can even add nested layouts
    var innerLayout = new Ext.BorderLayout("dl-inner", {
        east: {
            initialSize: 200,
            autoScroll:true,
            split:true
        },
        center: {
            autoScroll:true
        }
    });
    innerLayout.beginUpdate();
    innerLayout.add("east", new Ext.ContentPanel("dl-details"));
    innerLayout.add("center", new Ext.ContentPanel("selection-panel"));
    innerLayout.endUpdate(true);

    var layout = dialog.getLayout();
    layout.beginUpdate();
    layout.add("center", new Ext.ContentPanel("standard-panel",
                        {title: "Download the Source", fitToFrame:true}));
    layout.add("center", new Ext.NestedLayoutPanel(innerLayout,
               {title: "Build your own ext.js"}));
    layout.getRegion("center").showPanel(sp);
    layout.endUpdate();
}

Properties - Methods - Events - Config Options

Public Properties

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

Public Methods

Method		Defined By
	LayoutDialog( `String/HTMLElement/Ext.Element el`, `Object config` )	LayoutDialog
		LayoutDialog
	addButton( `String/Object config`, `Function handler`, [`Object scope`] ) : Ext.Button	BasicDialog
	Adds a button to the footer section of the dialog.	BasicDialog
	addEvents( `Object object` ) : void	Observable
	Used to define events on this Observable	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...	BasicDialog
	addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void	Observable
	Appends an event handler to this component	Observable
	alignTo( `String/HTMLElement/Ext.Element element`, `String position`, [`Array offsets`] ) : Ext.BasicDialog	BasicDialog
	Aligns the dialog to the specified element	BasicDialog
	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.	BasicDialog
	beginUpdate() : void	LayoutDialog
	Deprecated. Begins an update of the layout and sets display to block and visibility to hidden. Use standard beginUpda...	LayoutDialog
	center() : Ext.BasicDialog	BasicDialog
	Centers this dialog in the viewport	BasicDialog
	collapse() : void	BasicDialog
	Collapses the dialog to its minimized state (only the title bar is visible). Equivalent to the user clicking the coll...	BasicDialog
	destroy( [`Boolean removeEl`] ) : void	BasicDialog
	Destroys this dialog and all its supporting elements (including any tabs, shim, shadow, proxy, mask, etc.) Also remo...	BasicDialog
	endUpdate() : void	LayoutDialog
	Deprecated. Ends update of the layout ~~and resets display to none~~. Use standard beginUpdate/endUpdate on the layout.	LayoutDialog
	expand() : void	BasicDialog
	Expands a collapsed dialog back to its normal state. Equivalent to the user clicking the expand dialog button.	BasicDialog
	fireEvent( `String eventName`, `Object... args` ) : Boolean	Observable
	Fires the specified event with the passed parameters (minus the event name).	Observable
	focus() : void	BasicDialog
	Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the dialog itself will receive focus.	BasicDialog
	getEl() : Ext.Element	BasicDialog
	Returns the element for this dialog	BasicDialog
	getLayout() : Ext.BorderLayout	LayoutDialog
	Get the BorderLayout for this dialog	LayoutDialog
	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 ...	BasicDialog
	hasListener( `String eventName` ) : Boolean	Observable
	Checks to see if this object has any listeners for a specified event	Observable
	hide( [`Function callback`] ) : Ext.BasicDialog	BasicDialog
	Hides the dialog.	BasicDialog
	initTabs() : Ext.TabPanel	BasicDialog
	Reinitializes the tabs component, clearing out old tabs and finding new ones.	BasicDialog
	isVisible() : Boolean	BasicDialog
	Returns true if the dialog is visible	BasicDialog
	moveTo( `Number x`, `Number y` ) : Ext.BasicDialog	BasicDialog
	Moves the dialog's top-left corner to the specified point	BasicDialog
	on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void	Observable
	Appends an event handler to this element (shorthand for addListener)	Observable
	purgeListeners() : void	Observable
	Removes all listeners for this object	Observable
	removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void	Observable
	Removes a listener	Observable
	resizeTo( `Number width`, `Number height` ) : Ext.BasicDialog	BasicDialog
	Resizes the dialog.	BasicDialog
	restoreState() : Ext.BasicDialog	BasicDialog
	Restores the previous state of the dialog if Ext.state is configured.	BasicDialog
	setContentSize( `Number width`, `Number height` ) : Ext.BasicDialog	BasicDialog
	Resizes the dialog to fit the specified content size.	BasicDialog
	setDefaultButton( `Ext.BasicDialog.Button btn` ) : Ext.BasicDialog	BasicDialog
	Sets the default button to be focused when the dialog is displayed.	BasicDialog
	setTitle( `String text` ) : Ext.BasicDialog	BasicDialog
	Sets the dialog title text	BasicDialog
	show( [`String/HTMLElement/Ext.Element animateTarget`] ) : Ext.BasicDialog	BasicDialog
	Shows the dialog.	BasicDialog
	toBack() : Ext.BasicDialog	BasicDialog
	Sends this dialog to the back (under) of any other visible dialogs	BasicDialog
	toFront() : Ext.BasicDialog	BasicDialog
	Brings this dialog to the front of any other visible dialogs	BasicDialog
	un( `String eventName`, `Function handler`, [`Object scope`] ) : void	Observable
	Removes a listener (shorthand for removeListener)	Observable

Public Events

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

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

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

LayoutDialog

public function LayoutDialog( String/HTMLElement/Ext.Element el, Object config )

Parameters:

el : String/HTMLElement/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 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.

beginUpdate

public function beginUpdate()

Deprecated. Begins an update of the layout ~~and sets display to block and visibility to hidden~~. Use standard beginUpdate/endUpdate on the layout.

Parameters:

None.

Returns:

void

This method is defined by LayoutDialog.

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.

endUpdate

public function endUpdate()

Deprecated. Ends update of the layout ~~and resets display to none~~. Use standard beginUpdate/endUpdate on the layout.

Parameters:

None.

Returns:

void

This method is defined by LayoutDialog.

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.

getLayout

public function getLayout()

Get the BorderLayout for this dialog

Parameters:

None.

Returns:

Ext.BorderLayout

This method is defined by LayoutDialog.

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)