Package: | Ext |
Class: | LayoutDialog |
Extends: | BasicDialog |
Defined In: | BasicDialog.js |
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();
}
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 |
Method | Defined By | |
---|---|---|
LayoutDialog( String/HTMLElement/Ext.Element el , Object config ) |
LayoutDialog | |
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. | ||
beginUpdate() : void | LayoutDialog | |
Deprecated. Begins an update of the layout and sets display to block and visibility to hidden. Use standard beginUpda... | ||
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... | ||
endUpdate() : void | LayoutDialog | |
Deprecated. Ends update of the layout |
||
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 | ||
getLayout() : Ext.BorderLayout | LayoutDialog | |
Get the BorderLayout 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) |
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 | 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) |
public Array buttons
public function LayoutDialog( String/HTMLElement/Ext.Element el
, Object config
)
el
: String/HTMLElement/Ext.Elementconfig
: Objectpublic function addButton( String/Object config
, Function handler
, [Object scope
] )
config
: String/Objecthandler
: Functionscope
: ObjectExt.Button
public function addEvents( Object object
)
object
: Objectvoid
public function addKeyListener( Number/Array/Object key
, Function fn
, [Object scope
] )
key
: Number/Array/Objectfn
: Functionscope
: ObjectExt.BasicDialog
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Object
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
});
void
public function alignTo( String/HTMLElement/Ext.Element element
, String position
, [Array offsets
] )
element
: String/HTMLElement/Ext.Elementposition
: Stringoffsets
: ArrayExt.BasicDialog
public function anchorTo( String/HTMLElement/Ext.Element element
, String position
, [Array offsets
], [Boolean/Number monitorScroll
] )
element
: String/HTMLElement/Ext.Elementposition
: Stringoffsets
: ArraymonitorScroll
: Boolean/NumberExt.BasicDialog
public function beginUpdate()
void
public function center()
Ext.BasicDialog
public function collapse()
void
public function destroy( [Boolean removeEl
] )
removeEl
: Booleanvoid
public function endUpdate()
void
public function expand()
void
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function focus()
void
public function getEl()
Ext.Element
public function getLayout()
Ext.BorderLayout
public function getTabs()
Ext.TabPanel
public function hasListener( String eventName
)
eventName
: StringBoolean
public function hide( [Function callback
] )
callback
: FunctionExt.BasicDialog
public function initTabs()
Ext.TabPanel
public function isVisible()
Boolean
public function moveTo( Number x
, Number y
)
x
: Numbery
: NumberExt.BasicDialog
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Objectvoid
public function purgeListeners()
void
public function removeListener( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function resizeTo( Number width
, Number height
)
width
: Numberheight
: NumberExt.BasicDialog
public function restoreState()
Ext.BasicDialog
public function setContentSize( Number width
, Number height
)
width
: Numberheight
: NumberExt.BasicDialog
public function setDefaultButton( Ext.BasicDialog.Button btn
)
btn
: Ext.BasicDialog.ButtonExt.BasicDialog
public function setTitle( String text
)
text
: StringExt.BasicDialog
public function show( [String/HTMLElement/Ext.Element animateTarget
] )
animateTarget
: String/HTMLElement/Ext.ElementExt.BasicDialog
public function toBack()
Ext.BasicDialog
public function toFront()
Ext.BasicDialog
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public event beforehide
this
: Ext.BasicDialogpublic event beforeshow
this
: Ext.BasicDialogpublic event hide
this
: Ext.BasicDialogpublic event keydown
this
: Ext.BasicDialoge
: Ext.EventObjectpublic event move
this
: Ext.BasicDialogx
: Numbery
: Numberpublic event resize
this
: Ext.BasicDialogwidth
: Numberheight
: Numberpublic event show
this
: Ext.BasicDialoganimateTarget : String/Element
autoCreate : Boolean/DomHelper
autoScroll : Boolean
autoTabs : Boolean
buttonAlign : String
closable : Boolean
collapsible : Boolean
constraintoviewport : Boolean
draggable : Boolean
fixedcenter : Boolean
height : Number
minButtonWidth : Number
minHeight : Number
minWidth : Number
modal : Boolean
proxyDrag : Boolean
resizable : Boolean
resizeHandles : String
shadow : Boolean/String
shadowOffset : Number
shim : Boolean
syncHeightBeforeShow : Boolean
tabTag : String
title : String
width : Number
x : Number
y : Number