Extjs学习笔记（消息框）
一 提示框
语法：Ext.Msg.alert(String title, String msg, Function fn, Object scope);
参数：
title:标题
msg:提示内容
fn:提示框关闭后自动调用的回调函数
scope:作用域，用于指定this指向哪里，一般不用
例子：
//提示框
popMsgBox = function () {
Ext.MessageBox.alert("提示框", "这是一个提示框", function () {
alert("提示框要关闭了！");
});
};
二 输入框
语法：Ext.Msg.prompt(String title, String msg, Function fn, Object scope, Boolean/Number multiline);
参数：
title:标题
msg:消息框内容
fn:消息框关闭后自动调用的回调函数
scope:作用域，用于指定this指向哪里，一般不用
multiline:如果为true或为数字，将允许输入多选或者指定默认高度（像素），反之不能多行
例子：
//单行输入框 inputMsgBox1 = function () { Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) { Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt); }); }; //多行输入框 inputMsgBox2 = function () { Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) { Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt); }, this, 300); };
三 确认框
语法：Ext.Msg.confirm(String title, String msg, Function fn, Object scope);
参数：
title:标题
msg:内容
fn:消息框关闭后自动调用的回调函数
scope:作用域，用于指定this指向哪里，一般不用
例子：
//确认框
confirmMsgBox = function () {
Ext.Msg.confirm("确认框", "请点击下面的按键做出选择", function (btn) {
Ext.Msg.alert("您点击的按钮是： " + btn);
});
};
四 自定义消息框
语法：Ext.Msg.show(Object config);
参数：config中常见属性如下：
title:标题
msg:消息内容
width:消息框宽度
multiline:是否显示多行
closable:是否显示关闭按钮
buttons:按钮
icons:图标
fn:回调函数
其中：
buttons的取值如下：
OK:只有”确定“按钮
CANCEL:只有”取消“按钮
OKCANCEL:有”确定“和”取消“按钮
YESNO:有”是“和”否“按钮
YESNOCANCEL:有”是“、”否“和”取消“按钮
icons的取值如下：
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
例子：
//自定义消息框
customMsgBox = function () {
var config = {
title: "自定义消息框",
msg: "这是一个自定义消息框",
width: 300,
multiline: true,
closable: true, //是否显示关闭按钮
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.Info,
fn: function (btn, txt) { alert("你点击的按键是： " + btn + " 你输入的内容是： " + txt); }
};
Ext.Msg.show(config);
};
五 进度条对话框
其实就是一个自定义的消息框。
例子：
//进度条对话框 progressMsgBox = function () { Ext.Msg.show({ title: "请稍后", msg: "正在加载...", progressText: "正在初始化...", width: 300, progress: true, closable: false }); var fun = function (v) { return function () { if (v == 12) { Ext.Msg.hide(); Ext.Msg.alert("完成", "所有项目加载完成"); } else { var i = v / 11; Ext.Msg.updateProgress(i, "已加载" + Math.round(100 * i) + "%"); }; }; }; for (var i = 1; i < 13; i++) { setTimeout(fun(i), i * 100); } };
六 飞出来的消息框
例子如下：
//飞出来的消息框
animalMsgBox = function () {
var config = {
title: "飞出来的消息框",
msg: "这是一个飞出来的消息框",
width: 300,
multiline: false,
closable: false,
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
animEl: "btnProgressMsgBox"
};
Ext.Msg.show(config);
};
设置animEl，该选项指定一个标签，消息框从该标签处飞出，关闭后又买回标签。（但我利用Extjs.4.07没有看到效果，所说利用Extjs.2.XX可以看到效果，没有实验）。
七 整体代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>消息框</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="ext-4.0.7-gpl/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { //Ext.Msg.alert("提示框", "这是一个提示框"); }); //提示框 popMsgBox = function () { Ext.MessageBox.alert("提示框", "这是一个提示框", function () { alert("提示框要关闭了！"); }); }; //单行输入框 inputMsgBox1 = function () { Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) { Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt); }); }; //多行输入框 inputMsgBox2 = function () { Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) { Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt); }, this, 300); }; //确认框 confirmMsgBox = function () { Ext.Msg.confirm("确认框", "请点击下面的按键做出选择", function (btn) { Ext.Msg.alert("您点击的按钮是： " + btn); }); }; //自定义消息框 customMsgBox = function () { var config = { title: "自定义消息框", msg: "这是一个自定义消息框", width: 300, multiline: true, closable: true, //是否显示关闭按钮 buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.Info, fn: function (btn, txt) { alert("你点击的按键是： " + btn + " 你输入的内容是： " + txt); } }; Ext.Msg.show(config); }; //进度条对话框 progressMsgBox = function () { Ext.Msg.show({ title: "请稍后", msg: "正在加载...", progressText: "正在初始化...", width: 300, progress: true, closable: false }); var fun = function (v) { return function () { if (v == 12) { Ext.Msg.hide(); Ext.Msg.alert("完成", "所有项目加载完成"); } else { var i = v / 11; Ext.Msg.updateProgress(i, "已加载" + Math.round(100 * i) + "%"); }; }; }; for (var i = 1; i < 13; i++) { setTimeout(fun(i), i * 100); } }; //飞出来的消息框 animalMsgBox = function () { var config = { title: "飞出来的消息框", msg: "这是一个飞出来的消息框", width: 300, multiline: false, closable: false, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION, animEl: "btnProgressMsgBox" }; Ext.Msg.show(config); }; </script> </head> <body> <input type="button" id="btnPopMsgBox" value="提示框" onclick="popMsgBox();" /> <input type="button" id="btnInputMsgBox1" value="单行输入框" onclick="inputMsgBox1();" /> <input type="button" id="btnInputMsgBox2" value="多行输入框" onclick="inputMsgBox2();" /> <input type="button" id="btnComfirmMsgBox" value="确认框" onclick="confirmMsgBox();" /> <input type="button" id="btnCustomMsgBox" value="自定义消息框" onclick="customMsgBox();" /> <input type="button" id="btnProgressMsgBox " value="进度条对话框" onclick="progressMsgBox ();" /> <input type="button" id="btnAnimalMsgBox" value="飞出来的消息框" onclick="animalMsgBox ();" /> </body> </html>
