大家好，又见面了，我是你们的朋友全栈君。
首先，浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式：alert、confirm、prompt
鉴于其外观丑陋以及配置不方便，我们常采用Extjs自带的弹窗控件。
// 基本的alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');
// 用户对话框，用一个回调函数处理结果:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
if (btn == 'ok'){
// 处理文本值，然后关闭...
}
});
// 使用配置选项显示一个对话框:
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,
animEl: 'elId',
icon: Ext.MessageBox.QUESTION
});
————————————- 以上转载自API文档 ——————————————-
弹窗默认按钮文本的都是ok、cancel、yes、no等中文，如需自定义按钮文字，可以这么做：
Ext.MessageBox.buttonText.ok = “确定”;
Ext.MessageBox.buttonText.cancel = “取消”;
即调用buttonText这个属性下的属性，支持的属性有ok、cancel、yes、no
另外记一下使用案例：
Ext.getCmp("interviewOrderDetailGrid").selModel.selectAll();
Ext.MessageBox.buttonText.ok = "确定";
Ext.MessageBox.buttonText.cancel = "取消";
Ext.MessageBox.prompt('', '请填写订购批次的名称:', function (btn,text) {
if(btn == "cancel") {
Ext.getCmp("interviewOrderDetailGrid").selModel.clearSelections();
} else if (btn == "ok") {
if (text.match(/^[ ]*$/)){
alert("批次名称不能为空，请重新订购");
Ext.getCmp("interviewOrderDetailGrid").selModel.clearSelections();
} else {
var orderGroup = Ext.getCmp("interviewOrderListCardList").items.items[0].cardValue;
var params = {
SERVICE_ID:[25, 20, 1012],
orderGroup:orderGroup,
orderGroupName:text
};
var url = "";
var type = "";
var tmpFn = function(data){
var result = JSON.parse(data);
if(result.success){
alert("订单提交成功！\n"+Ext.encode(result.data.detailMap)+"\n"+result.data.note);
Ext.getCmp("interviewMenuOrderSearchPanelSureBtn").el.dom.click();
}else{
alert(result.data.msgs[0].message);
}
};
Ext.jquery.getData(params,url,type,tmpFn);
}
}
});—————————————————– 2017.2.13 更新 —————————————————-
1、Ext.MessageBox
//Ext.MessageBox为我们提供的 alert/confirm/prompt 等完全可以代替浏览器原生
Ext.MessageBox.alert()
Ext.MessageBox.alert(‘标题’,’内容’,function(btn){
//参数一:窗口的标题;
//参数二:窗口的内容;
//参数三:回调函数;
alert(‘你刚刚点击了’+btn);
});
2、Ext.MessageBox.confirm()
//confirm为用户提供了 Yes和No, 它们会在需要用户作出判断时用到
Ext.MessageBox.confirm(‘选择框’,’你要选择yes还是no?’,function(btn){
alert(‘你刚刚点击了’+btn);
});
//用户选择Yes或No之后,回调函数即被调用,btn参数的值可能是yes或no,通过得到的值就可以知道用户点击了哪个按钮;
3、Ext.MessageBox.prompt()
//prompt允许用户输入一段字符串,然后提交给JS处理;
//prompt还提供了两个按钮,用户可以决定是否将输入的内容提交;
Ext.MessageBox.prompt(‘输入框’,’你输入帐号’,function(btn,text){
alert(‘你刚刚点击了’+btn+’,你刚刚输入了’+text);
});
//回调函数参数一:代表用户点击的按钮;
//回调函数参数二:用户输入的字符;
4、对话框的更多配置–show()
可以输入多行的输入框
Ext.MessageBox.show({
title:’多行输入框’, //对话框标题;
msg:’你可以输入好几行’, //对话框显示的提示内容;
width:300,
buttons:Ext.MessageBox.OKCANCEL, //对话框的按钮,Ext.MessageBox已预置;
multiline:true, //允许多行;
fn:function(btn,text){ //回调函数;
alert(‘你刚刚点击了’+btn+’,你刚刚输入了’+text);
}
});
5、自定义对话框的按钮
Ext.MessageBox.show({
…
buttons:Ext.MessageBox.YESNOCANCEL,
//Ext.MessageBox预置的yes/cancle按钮;
…
});
6、进度条
//Ext.MessagesBox提供了默认的进度条;
Ext.MessageBox.show({
title:’请等待’,
msg:’读取数据中’,
width:240,
progress:true, //显示进度条参数;
closable:false //隐藏右上角的关闭按钮;
});
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10,’正在读取第’+v+’个,一共10个’);
//updateProgress()函数让进度条状态发生变化;
}
};
};
for(var i=1; i<12; i++){
setTimeout(f(i),i*1000);
//定时器;10秒之后进度条将隐藏;
}
//也可以直接使用progress函数↓↓↓↓↓
Ext.MessageBox.progress(‘请等待’,msg:’读取数据中’);
自动变化的进度条提示框
Ext.MessageBox.wait(‘请等待’,msg:’读取数据中’);
7、动画效果
//使用animEl:为对话框设置弹出和关闭的动画效果;
//对话框会依据指定的HTML元素播放弹出和关闭的动画;
Ext.MessageBox.show({
…
animEl:’dialog’
//对应动画是基于id=’dialog’的元素;
});
//Ext.MessageBox =Ext.Msg
//Ext.Msg弹出的对话框都是基于同一个内部Ext.Window实例;因此不能同时使用Ext.MessageBox弹出多个对话框;页面只会显示最后一个窗口;
以上转自：深入浅出ExtJS 第七章 弹出窗口
——————————————- 2017.2.24 更新 —————————————–
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/155647.html原文链接：https://javaforall.net
