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 neccessary layout config options to the dialogs 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();

属性 - 方法 - 事件 - 设置选项

公共属性

属性		定义对象
	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

公共方法

方法		定义对象
	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
	将对象中没有的事件从给出的对象中复制过来。	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
	为该组件加入事件处理器函数	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
	标记一个元素到另外一个元素，并当window resiz时重新对齐。	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
	触发指定的事件, 并将参数传入（至少要有事件名称）。	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
	检查该对象是否拥有指定事件的侦听器	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 options`]) : void	Observable
	为该组件加入事件处理器函数, addListener 的简写方式	Observable
	purgeListeners() : void	Observable
	从对象身上移除所有的侦听器	Observable
	removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void	Observable
	移除侦听器	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
	移除侦听器, removeListener 的简写方式	Observable

公共事件

事件		定义对象
	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

设置选项

设置选项		定义对象
	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 top page coordinate of the dialog (defaults to center screen)	BasicDialog
	y : Number	BasicDialog
	The default left page coordinate of the dialog (defaults to center screen)	BasicDialog

属性详情

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.

构造函数

LayoutDialog

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

参数：

el : String/HTMLElement/Ext.Element
The id of or container element
config : Object
configuration options

方法详情

addButton

public function addButton(String/Object config, Function handler, [Object scope])

Adds a button to the footer section of the dialog.

参数：

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
（可选） The scope of the handler function

返回：

Ext.Button
this

This method is defined by BasicDialog.

addEvents

public function addEvents(Object object)

将对象中没有的事件从给出的对象中复制过来。给出的对象必须也继承于 Observable 对象此方法才会有效果。

参数：

object : Object
要复制事件的源对象

返回：

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.

参数：

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
（可选） The scope of the function

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])

为组件添加一个事件监听器

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
scope : Object
（可选）处理函数执行的作用域。处理函数 "this" 的内容。
options : Object
（可选）一个包含处理设置属性的对象。可以包含下列的属性：
- scope {Object} 处理函数执行的作用域。处理函数 "this" 的内容。
- delegate {String} 一个简单的选择器用来过滤目标或查找目标的子节点。
- stopEvent {Boolean} 值为 True 时用来中止事件。那样将中止传播，并防止缺省动作。
- preventDefault {Boolean} 值为 True 时用来防止缺省动作。
- stopPropagation {Boolean} 值为 True 时用来中止事件传播。
- normalized {Boolean} 值为 False 时向处理函数传递浏览器事件用以代替 Ext.EventObject 对象。
- delay {Number} 当事件触发后启用处理函数的延迟微秒数。
- single {Boolean} 值为 True 时将添加一个处理函数用来处理下个触发的事件，并在处理完后移除。
- buffer {Number} 使处理函数计划在由 Ext.util.DelayedTask 指定的微秒数后执行。如果事件在延迟期间再次触发，原来的处理函数将不再启动，而是由新的计划代替。
组合选项
使用选项参数可以组合不同类型的监听器：

下面是一个标准的、延迟执行的、一次性的监听器，将会自动停止事件并传递一个自定义的参数(forumId)
代码：
```
el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });
```
这个方法也允许传递的单个参数是一个包含多个指定处理函数的设置对象。

一次调用多个处理函数
代码：
```
el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });
```
或者简写为：
代码：
```
el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
```

返回：

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

参数：

element : String/HTMLElement/Ext.Element
要对齐的元素
position : String
The position to align to (see Ext.Element.alignTo for more details).
offsets : Array
（可选）偏移位置 [x, y]

返回：

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])

标记一个元素到另外一个元素，并当window resiz时重新对齐。

参数：

element : String/HTMLElement/Ext.Element
要对齐的元素
position : String
The position to align to (see Ext.Element.alignTo for more details)
offsets : Array
（可选）偏移位置 [x, y]
monitorScroll : Boolean/Number
（可选） true to monitor body scroll and reposition. If this parameter is a number, it is used as the buffer delay (defaults to 50ms).

返回：

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.

参数：

无。

返回：

void

This method is defined by LayoutDialog.

center

public function center()

Centers this dialog in the viewport

参数：

无。

返回：

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.

参数：

无。

返回：

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.

参数：

removeEl : Boolean
（可选） true to remove the element from the DOM

返回：

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.

参数：

无。

返回：

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.

参数：

无。

返回：

void

This method is defined by BasicDialog.

fireEvent

public function fireEvent(String eventName, Object... args)

触发指定的事件并给出参数（至少要有事件名称）。

参数：

eventName : String
args : Object...
传入处理函数的参数

返回：

Boolean
如果任何处理函数返回 false 则返回值为 false, 否则返回 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.

参数：

无。

返回：

void

This method is defined by BasicDialog.

getEl

public function getEl()

Returns the element for this dialog

参数：

无。

返回：

Ext.Element
The underlying dialog Element

This method is defined by BasicDialog.

getLayout

public function getLayout()

Get the BorderLayout for this dialog

参数：

无。

返回：

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.

参数：

无。

返回：

Ext.TabPanel
The tabs component

This method is defined by BasicDialog.

hasListener

public function hasListener(String eventName)

检查该对象是否拥有指定事件的侦听器

参数：

eventName : String
查询事件之名称

返回：

Boolean
值为 True 值表示事件监听器存在, 否则值为 false。

This method is defined by Observable.

hide

public function hide([Function callback])

Hides the dialog.

参数：

callback : Function
（可选） Function to call when the dialog is hidden

返回：

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.

参数：

无。

返回：

Ext.TabPanel
The tabs component

This method is defined by BasicDialog.

isVisible

public function isVisible()

Returns true if the dialog is visible

参数：

无。

返回：

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

参数：

x : Number
y : Number

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

on

public function on(String eventName, Function handler, [Object options])

为该组件加入事件处理器函数, addListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
options : Object
（可选）

返回：

void

This method is defined by Observable.

purgeListeners

public function purgeListeners()

从对象身上移除所有的侦听器

参数：

无。

返回：

void

This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])

移除侦听器

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

resizeTo

public function resizeTo(Number width, Number height)

Resizes the dialog.

参数：

width : Number
height : Number

返回：

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.

参数：

无。

返回：

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.

参数：

width : Number
height : Number

返回：

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.

参数：

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

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

setTitle

public function setTitle(String text)

Sets the dialog title text

参数：

text : String
The title text to display

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

show

public function show([String/HTMLElement/Ext.Element animateTarget])

Shows the dialog.

参数：

animateTarget : String/HTMLElement/Ext.Element
（可选） Reset the animation target

返回：

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

参数：

无。

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

toFront

public function toFront()

Brings this dialog to the front of any other visible dialogs

参数：

无。

返回：

Ext.BasicDialog
this

This method is defined by BasicDialog.

un

public function un(String eventName, Function handler, [Object scope])

移除侦听器, removeListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

事件详情

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
新宽度
height : Number
新高度

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.

设置详情

animateTarget

animateTarget : String/Element

Id or element from which the dialog should animate while opening (defaults to null with no animation)