Package: | Ext |
Class: | BasicDialog |
Extends: | Observable |
Subclasses: | LayoutDialog |
Defined In: | BasicDialog.js |
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 也能关闭对话框
dlg.addButton('确定', dlg.hide, dlg); // 可以调用保存function代替隐藏对话框
dlg.addButton('取消', dlg.hide, dlg);
dlg.show();
对话框应该为“body”元素的直系子节点。属性 | 定义对象 | |
---|---|---|
body : Ext.Element | BasicDialog | |
主体元素 | ||
buttons : Array | BasicDialog | |
所有通过“addButton”方法添加的按钮数组 | ||
footer : Ext.Element | BasicDialog | |
底部元素 | ||
header : Ext.Element | BasicDialog | |
头部元素 |
方法 | 定义对象 | |
---|---|---|
BasicDialog(String/HTMLElement/Ext.Element el , Object config ) |
BasicDialog | |
创建一个 BasicDialog | ||
addButton(String/Object config , Function handler , [Object scope ]) : Ext.Button |
BasicDialog | |
在对话框的底部区域添加一个按钮。 | ||
addEvents(Object object ) : void |
Observable | |
将对话框对象中没有的事件从给出的对象中复制过来。 | ||
addKeyListener(Number/Array/Object key , Function fn , [Object scope ]) : Ext.BasicDialog |
BasicDialog | |
当对话框显示的时候添加一个键盘监听器。 | ||
addListener(String eventName , Function handler , [Object scope ], [Object options ]) : void |
Observable | |
为组件添加一个事件监听器。 | ||
alignTo(String/HTMLElement/Ext.Element element , String position , [Array offsets ]) : Ext.BasicDialog |
BasicDialog | |
将对话框对齐到指定元素上。 | ||
anchorTo(String/HTMLElement/Ext.Element element , String position , [Array offsets ], [Boolean/Number monitorScroll ]) : Ext.BasicDialog |
BasicDialog | |
将元素与另一个元素绑定,并在调整窗口大小后重新对齐元素。 | ||
center() : Ext.BasicDialog | BasicDialog | |
将对话框于视区居中显示。 | ||
collapse() : void | BasicDialog | |
将对话框收缩到最小化状态(仅在标题栏可见时有效)。 | ||
destroy([Boolean removeEl ]) : void |
BasicDialog | |
销毁对话框和所有它支持的元素(包括 tabs、 shim、 shadow、 proxy、 mask 等等。) | ||
expand() : void | BasicDialog | |
将对话框展开到普通状态。 | ||
fireEvent(String eventName , Object... args ) : Boolean |
Observable | |
触发指定的事件并给出参数(至少要有事件名称)。 | ||
focus() : void | BasicDialog | |
将焦点置于对话框上。 | ||
getEl() : Ext.Element | BasicDialog | |
返回对话框元素。 | ||
getTabs() : Ext.TabPanel | BasicDialog | |
返回 TabPanel 组件(如果不存在则创建一个)。 | ||
hasListener(String eventName ) : Boolean |
Observable | |
检查对象是否拥有指定事件的监听器。 | ||
hide([Function callback ]) : Ext.BasicDialog |
BasicDialog | |
隐藏对话框。 | ||
initTabs() : Ext.TabPanel | BasicDialog | |
重新初始化 tabs 组件,清除原有的 tabs 并返回新的。 | ||
isVisible() : Boolean | BasicDialog | |
当对话框可见时返回“true”。 | ||
moveTo(Number x , Number y ) : Ext.BasicDialog |
BasicDialog | |
将对话框的左上角移动到指定的地方。 | ||
on(String eventName , Function handler , [Object options ]) : void |
Observable | |
为组件添加一个事件监听器。(addListener 的缩写) | ||
purgeListeners() : void | Observable | |
删除该对象所有的监听器。 | ||
removeListener(String eventName , Function handler , [Object scope ]) : void |
Observable | |
删除一个监听器。 | ||
resizeTo(Number width , Number height ) : Ext.BasicDialog |
BasicDialog | |
调整对话框大小。 | ||
restoreState() : Ext.BasicDialog | BasicDialog | |
如果配置过 Ext.state 则恢复对话框之前的状态。 | ||
setContentSize(Number width , Number height ) : Ext.BasicDialog |
BasicDialog | |
将对话框的大小调整到足以填充指定内容的大小。 | ||
setDefaultButton(Ext.BasicDialog.Button btn ) : Ext.BasicDialog |
BasicDialog | |
当对话框显示时将焦点设置在默认的按钮上。 | ||
setTitle(String text ) : Ext.BasicDialog |
BasicDialog | |
设置对话框的标题文本。 | ||
show([String/HTMLElement/Ext.Element animateTarget ]) : Ext.BasicDialog |
BasicDialog | |
展示对话框。 | ||
toBack() : Ext.BasicDialog | BasicDialog | |
将对话框置于其他可见的对话框的后面。 | ||
toFront() : Ext.BasicDialog | BasicDialog | |
将对话框置于其他可见的对话框的前面。 | ||
un(String eventName , Function handler , [Object scope ]) : void |
Observable | |
删除一个监听器(removeListener 的缩写)。 |
事件 | 定义对象 | |
---|---|---|
beforehide : (Ext.BasicDialog this ) |
BasicDialog | |
对话框隐藏前触发。 | ||
beforeshow : (Ext.BasicDialog this ) |
BasicDialog | |
对话框展示前触发。 | ||
hide : (Ext.BasicDialog this ) |
BasicDialog | |
对话框隐藏时触发。 | ||
keydown : (Ext.BasicDialog this , Ext.EventObject e ) |
BasicDialog | |
按下键盘时触发。 | ||
move : (Ext.BasicDialog this , Number x , Number y ) |
BasicDialog | |
用户移动对话框时触发。 | ||
resize : (Ext.BasicDialog this , Number width , Number height ) |
BasicDialog | |
用户调整对话框大小时触发。 | ||
show : (Ext.BasicDialog this ) |
BasicDialog | |
对话框展示时触发。 |
设置选项 | 定义对象 | |
---|---|---|
animateTarget : String/Element | BasicDialog | |
对话框打开时应用动画的 Id 或者元素(默认值为“null”,表示没有动画)。 | ||
autoCreate : Boolean/DomHelper | BasicDialog | |
值为“true”时自动创建,或者使用“DomHelper”对象创建(默认为“false”)。 | ||
autoScroll : Boolean | BasicDialog | |
值为“true”时允许对话框的主体部分里的内容溢出,并显示滚动条(默认为“false”)。 | ||
autoTabs : Boolean | BasicDialog | |
值为“true”时,所有 class 属性为“x-dlg-tab”的元素将被自动转换为 tabs(默认为“false”)。 | ||
buttonAlign : String | BasicDialog | |
合法的值为:“left”、“center”和“right”(默认为“right”)。 | ||
closable : Boolean | BasicDialog | |
值为“false”时将移除标题栏右上角的关闭按钮(默认为“true”)。 | ||
collapsible : Boolean | BasicDialog | |
值为“false”时将移除标题栏右上角的最小化按钮(默认为“true”)。 | ||
constraintoviewport : Boolean | BasicDialog | |
值为“true”时将保持对话框限定在可视区的边界内(默认为“true”)。 | ||
draggable : Boolean | BasicDialog | |
值为“false”时将禁止对话框在可视区内的拖动(默认为“true”)。 | ||
fixedcenter : Boolean | BasicDialog | |
值为“true”时将确保对话框总是在可视区的中央(默认为“false”)。 | ||
height : Number | BasicDialog | |
对话框的高度,单位像素(也可以通过 CSS 来设置)。如果未指定则由浏览器决定。 | ||
minButtonWidth : Number | BasicDialog | |
对话框中按钮宽度的最小值(默认为“75”)。 | ||
minHeight : Number | BasicDialog | |
对话框高度的最小值(默认为“80”)。 | ||
minWidth : Number | BasicDialog | |
对话框宽度的最小值(默认为“200”)。 | ||
modal : Boolean | BasicDialog | |
值为“true”时模式显示对话框,防止用户与页面的剩余部分交互(默认为“false”)。 | ||
proxyDrag : Boolean | BasicDialog | |
值为“true”时拖动对话框会显示一个轮廓,当“draggable”为“true”时使用(默认为“false”)。 | ||
resizable : Boolean | BasicDialog | |
值为“false”时禁止手动调整对话框大小(默认为“true”)。 | ||
resizeHandles : String | BasicDialog | |
设置显示的调整柄,详见Ext.Resizable中调整柄的可用值(默认为“all”)。 | ||
shadow : Boolean/String | BasicDialog | |
“true”或者“sides”为默认效果,“frame”为4方向阴影,“drop”为右下方阴影(默认为“false”)。 | ||
shadowOffset : Number | BasicDialog | |
阴影显示时的偏移量,单位为像素(默认为“5”)。 | ||
shim : Boolean | BasicDialog | |
值为“true”时将创建一个“iframe”元素以免被“select”穿越(默认为“false”)。 | ||
syncHeightBeforeShow : Boolean | BasicDialog | |
值为“true”时则在对话框显示前重新计算高度(默认为“false”)。 | ||
tabTag : String | BasicDialog | |
“tab”元素的标签名称,当 autoTabs = true 时使用(默认为“div”)。 | ||
title : String | BasicDialog | |
标题栏上默认显示的文字(默认为“null”)。 | ||
width : Number | BasicDialog | |
对话框的宽度,单位像素(也可以通过 CSS 来设置)。如果未指定则由浏览器决定。 | ||
x : Number | BasicDialog | |
对话框默认的顶部坐标(默认为屏幕中央) | ||
y : Number | BasicDialog | |
对话框默认的左边坐标(默认为屏幕中央) |
public Ext.Element body
public Array buttons
public Ext.Element footer
public Ext.Element header
public function BasicDialog(String/HTMLElement/Ext.Element el
, Object config
)
el
: String/HTMLElement/Ext.Element
config
: Object
public function addButton(String/Object config
, Function handler
, [Object scope
])
config
: String/Object
handler
: Function
scope
: Object
Ext.Button
public function addEvents(Object object
)
object
: Object
void
public function addKeyListener(Number/Array/Object key
, Function fn
, [Object scope
])
key
: Number/Array/Object
fn
: Function
scope
: Object
Ext.BasicDialog
public function addListener(String eventName
, Function handler
, [Object scope
], [Object options
])
eventName
: String
handler
: Function
scope
: Object
options
: Object
组合选项
使用选项参数可以组合不同类型的监听器:
下面是一个标准的、延迟执行的、一次性的监听器,将会自动停止事件并传递一个自定义的参数(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
public function alignTo(String/HTMLElement/Ext.Element element
, String position
, [Array offsets
])
element
: String/HTMLElement/Ext.Element
position
: String
offsets
: Array
Ext.BasicDialog
public function anchorTo(String/HTMLElement/Ext.Element element
, String position
, [Array offsets
], [Boolean/Number monitorScroll
])
element
: String/HTMLElement/Ext.Element
position
: String
offsets
: Array
monitorScroll
: Boolean/Number
Ext.BasicDialog
public function center()
Ext.BasicDialog
public function collapse()
void
public function destroy([Boolean removeEl
])
removeEl
: Boolean
void
public function expand()
void
public function fireEvent(String eventName
, Object... args
)
eventName
: String
args
: Object...
Boolean
public function focus()
void
public function getEl()
Ext.Element
public function getTabs()
Ext.TabPanel
public function hasListener(String eventName
)
eventName
: String
Boolean
public function hide([Function callback
])
callback
: Function
Ext.BasicDialog
public function initTabs()
Ext.TabPanel
public function isVisible()
Boolean
public function moveTo(Number x
, Number y
)
x
: Number
y
: Number
Ext.BasicDialog
public function on(String eventName
, Function handler
, [Object options
])
eventName
: String
handler
: Function
options
: Object
void
public function removeListener(String eventName
, Function handler
, [Object scope
])
eventName
: String
handler
: Function
scope
: Object
void
public function resizeTo(Number width
, Number height
)
width
: Number
height
: Number
Ext.BasicDialog
public function restoreState()
Ext.BasicDialog
public function setContentSize(Number width
, Number height
)
width
: Number
height
: Number
Ext.BasicDialog
public function setDefaultButton(Ext.BasicDialog.Button btn
)
btn
: Ext.BasicDialog.Button
Ext.BasicDialog
public function setTitle(String text
)
text
: String
Ext.BasicDialog
public function show([String/HTMLElement/Ext.Element animateTarget
])
animateTarget
: String/HTMLElement/Ext.Element
Ext.BasicDialog
public function toBack()
Ext.BasicDialog
public function toFront()
Ext.BasicDialog
public function un(String eventName
, Function handler
, [Object scope
])
eventName
: String
handler
: Function
scope
: Object
void
public event beforehide
this
: Ext.BasicDialog
public event beforeshow
this
: Ext.BasicDialog
public event hide
this
: Ext.BasicDialog
public event keydown
this
: Ext.BasicDialog
e
: Ext.EventObject
public event move
this
: Ext.BasicDialog
x
: Number
y
: Number
public event resize
this
: Ext.BasicDialog
width
: Number
height
: Number
public event show
this
: Ext.BasicDialog
animateTarget : 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