Extjs弹窗控件——Ext.MessageBox
2017-02-13 13:45
435 查看
首先,浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式:alert、confirm、prompt
鉴于其外观丑陋以及配置不方便,我们常采用Extjs自带的弹窗控件。
[/code]
------------------------------------- 以上转载自API文档 -------------------------------------------
弹窗默认按钮文本的都是ok、cancel、yes、no等中文,如需自定义按钮文字,可以这么做:
Ext.MessageBox.buttonText.ok = "确定";
Ext.MessageBox.buttonText.cancel = "取消";
即调用buttonText这个属性下的属性,支持的属性有ok、cancel、yes、no
另外记一下使用案例:
----------------------------------------------------- 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 更新 -----------------------------------------
鉴于其外观丑陋以及配置不方便,我们常采用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 });
[/code]
------------------------------------- 以上转载自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 更新 -----------------------------------------
相关文章推荐
- ExtJs学习系列之 FormPanel 布局:Ext中FormPanel面板的嵌套及控件属性赋值
- ExtJs4 笔记 Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs教程----控件介绍:文本框,下拉框,时间框,列表,弹窗
- Extjs Ext.MessageBox.confirm 确认对话框详解
- ExtJs4 笔记 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 AJAX 支持和丰富的界面效果
- EXTJS 加入中文包后的 Ext.MessageBox = Ext.Msg 依然是英文的BUG
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtJS4之Ext.MessageBox的各种用法
- EXTJS 学习总结(1) Ext.MessageBox
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
- Ext.Net/ExtJs:关于TextField控件内size、maxLength控制文本框输入字符长度属性失效问题分析以及解决方案
- 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
- 自定义ExtJS控件之Ext下拉树和Ext下拉表格
- Extjs4 获取items子控件时使用Ext.getCmp返回undefined
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
- Ext控件之MessageBox
- 基于Extjs的开源控件库 - http://extaspnet.codeplex.com/