ExtJs 4.x - MessagerBox

1.alert（提示框）

1.基本提示框（alert）

简单事例：

Ext.Msg.alert('提示', 'ExtJs Alert 方法弹出效果');

API：

alert(String title,String msg,Function fn,Object scope) : Ext.MessageBox 显示一个标准的带有确认按钮的只读消息框（类似于 JavaScript原... 显示一个标准的带有确认按钮的只读消息框（类似于 JavaScript原生的 alert函数、prompt函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的 ID 会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a callback function is passed it will be called after the user clicks the button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button). 参数项： title: String 标题文本。The title bar text msg: String 消息框body文本。The message box body text fn: Function （可选）消息框被关闭后调用的回调函数。(optional) The callback function invoked after the message box is closed scope: Object （可选）回调函数的作用域。(optional)The scope of the callback function 返回值： Ext.MessageBox this

FALSE

2.promot（带文本的提示框）

简单事例：

Ext.Msg.prompt('姓名', '请输入你的姓名：', function(btn, text){ 
if (btn == 'ok'){ 
Ext.Msg.alert(text); 
}else{ 
Ext.Msg.alert("请刷新页面重新输入"); 
} 
});

 

API：

prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline,String value) : Ext.MessageBox 显示一个带有确认和取消按钮的提示框，并接受用户输入文本（等同与Java... 显示一个带有确认和取消按钮的提示框，并接受用户输入文本（等同与JavaScript原生的prompt函数）。提示框可以是一个单行或多行文本框。如果给定了回调函数，则在用户点击任意一个按钮后执行回调函数， 并且被点击的按钮的ID（有可能是右上角的关闭按钮）和用户输入的文本都将被当做参数传给回调函数。Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked (could also be the top-right close button) and the text that was entered will be passed as the two parameters to the callback. 参数项： title: String 标题文本。The title bar text msg: String 消息框body文本。The message box body text fn: Function （可选的）消息框被关闭后调用的回调函数。(optional)The callback function invoked after the message box is closed scope: Object （可选的）回调函数的作用域。(optional)The scope of the callback function multiline: Boolean/Number （可选的）值为true时则创建一个defaultTextHeight值指定行数的文本域，或者一个以像素为单位表示的高度（默认为 false，表示单行）。(optional)True to create a multiline textbox using the defaultTextHeight property, or the height in pixels to create the textbox (defaults to false / single-line) value: String （可选的）text输入元素的默认值（默认为''）。(optional) Default value of the text input element (defaults to '') 返回值： Ext.MessageBox this

FALS

3.show窗口

简单事例：

Ext.MessageBox.show({ 
title:'保存更改?', 
msg: '你即将关闭这个窗口，是否确认?', 
buttons: Ext.Msg.YESNOCANCEL, 
icon: Ext.MessageBox.QUESTION 
});

 

API：

show(Object config) : Ext.MessageBox 基于给定的配置选项显示一个消息框，或者重新初始一个现存的消息框。Mes... 基于给定的配置选项显示一个消息框，或者重新初始一个现存的消息框。MessageBox 对象的所有显示函数（例如：prompt、alert、等等）均为内部调用此函数， 虽然这些调用均为此方法的简单的快捷方式并且不提供所有的下列配置选项。Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls are basic shortcuts and do not support all of the config options allowed here. 参数项： config: Object 可支持的配置项参数：The following config options are supported: animEl : String/Element 消息框显示和关闭时动画展现的目标元素，或它的 ID（默认为 undefined）。An id or Element from which the message box should animate as it opens and closes (defaults to undefined) buttons : Object/Boolean Button 配置对象（例如：Ext.MessageBox.OKCANCEL 或者 {ok:'Foo',cancel:'Bar'}），或者 false 表示不显示任何按钮（默认为 false）。A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo', cancel:'Bar'}), or false to not show any buttons (defaults to false) closable : Boolean 值为 false 则隐藏右上角的关闭按钮（默认为 true）。注意由于 progress 和 wait 对话框只能通过程序关闭，因此它们将忽略此参数并总是隐藏关闭按钮。False to hide the top-right close button (defaults to true). Note that progress and wait dialogs will ignore this property and always hide the close button as they can only be closed programmatically. cls : String 应用到消息框容器元素中的自定义 CSS 类。A custom CSS class to apply to the message box's container element defaultTextHeight : Number 以像素为单位表示的默认消息框的文本域高度，如果有的话（默认为 75）。The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) fn : Function 当对话框关闭后执行的回调函数。参数包括按钮（被点击的按钮的名字，如果可用，如："ok"），文本（活动的文本框的值，如果可用）。A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or on the dialog close button, or by pressing the return button to enter input. Progress 和 wait 对话框将忽略此选项，因为它们不会回应使用者的动作，并且只能在程序中被关闭，所以任何必须的函数都可以放在关闭对话框的代码中调用。以下是送入的参数： Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be closed programmatically, so any required function should be called by the same code after it closes the dialog. Parameters passed: buttonId : String 按下按钮的id，可以是：The ID of the button pressed, one of: ok yes no cancel text : String 输入文本字段的值可以是Value of the input field if either prompt or multiline is true opt : Object 进行显示的配置对象。The config object passed to show. scope : Object 回调函数的作用域。The scope of the callback function icon : String 一个指定了背景图片地址的 CSS 类名用于对话框显示图标（例如：Ext.MessageBox.WARNING 或者 'custom-class'，默认这 ''）。A CSS class that provides a background image to be used as the body icon for the dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '') iconCls : String 作用在头版图标的标准 Ext.WindowiconCls（默认为''）。The standard Ext.WindowiconCls to add an optional header icon (defaults to '') maxWidth : Number 以像素为单位表示的消息框的最大宽度（默认为 600）。The maximum width in pixels of the message box (defaults to 600) minWidth : Number 以像素为单位表示的消息框的最小宽度（默认为 100）。The minimum width in pixels of the message box (defaults to 100) modal : Boolean 值为 false 时允许用户在消息框在显示时交互（默认为 true） False to allow user interaction with the page while the message box is displayed (defaults to true) msg : String 使用指定的文本替换消息框中元素的 innerHTML （默认为XHTML兼容的非换行空格字符 ' '） A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space character ' ') multiline : Boolean 值为 true 时显示一个提示用户输入多行文本的对话框（默认为 false）。True to prompt the user to enter multi-line text (defaults to false) progress : Boolean 值为 true 时显示一个进度条（默认为 false）。True to display a progress bar (defaults to false) progressText : String 当 progress = true 时进度条内显示的文本（默认为 ''）。The text to display inside the progress bar if progress = true (defaults to '') prompt : Boolean 值为 true 时显示一个提示用户输入单行文本的对话框（默认为 false）。True to prompt the user to enter single-line text (defaults to false) proxyDrag : Boolean 值为 true 则在拖拽的时候显示一个轻量级的代理（默认为 false）。True to display a lightweight proxy while dragging (defaults to false) title : String 标题文本。The title text value : String 设置到活动文本框中的文本。The string value to set into the active textbox element if displayed wait : Boolean 值为true时显示一个进度条（默认为 false）。True to display a progress bar (defaults to false) waitConfig : Object Ext.ProgressBarwaitConfig对象（仅在 wait = true 时可用）。A Ext.ProgressBarwaitConfig object (applies only if wait = true) width : Number 以像素为单位表示的对话框的宽度。The width of the dialog in pixel

4.confirm确认框

简单事例：

Ext.MessageBox.confirm("确定XX吗？" ,"确定要XXX！");

API：

confirm(String title,String msg,Function fn,Object scope) : Ext.MessageBox 显示一个带有是和否按钮的确认消息框（等同与JavaScript 原生的... 显示一个带有是和否按钮的确认消息框（等同与JavaScript 原生的confirm函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的ID会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button). 参数项： title: String 标题文本。The title bar text msg: String 消息框body文本。The message box body text fn: Function （可选）消息框被关闭后调用的回调函数。(optional) The callback function invoked after the message box is closed scope: Object （可选）回调函数的作用域。(optional)The scope of the callback function 返回值： Ext.MessageBox this

5.progress进度条

简单事例：

Ext.MessageBox.progress({ 
title:"进度条", 
msg:"当前页面正在读取进度", 
progress:true, 
wait:true, 
progressText:"读取中。。。", 
waitConfig:{ 
interval:500, 
duration:5000, 
fn:function(){ 
Ext.MessageBox.hide(); 
} 
} 
});

 

API：

同show的API