标签：function MessageBox console button Ext UI Msg ExtJS
更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587505.html
2022年8月17日 发布。
2022年8月13日 从笔记迁移到博客。
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
MessageBox说明
Message Box常用于显示文本说明
使用Ext.window.MessageBox类实现，可以使用快捷方式Ext.MessageBox
Ext.Msg是Ext.window.MessageBox类的预定义的单例实例
注意：ExtJS中的消息框不会阻塞代码运行，如果需要阻塞可以使用回调函数
常用消息框类型
Alert（警告框）:
Displays a standard read-only message box with an OK button.
Confirm（确认框）:
Displays a confirmation message box with Yes and No buttons.
Confirm message box displays message with Yes and No buttons
You can also capture users click event for further process.
Prompt（文本输入框）:
Displays a message box with OK and Cancel buttons prompting the user to enter some text (similar to JavaScript's prompt). It can be a single-line or multi-line textbox.
Custom（自定义）:
Customized message box style.
语法
提示框（Alert）
提示框（Alert）
Ext.Msg.alert('标题', '内容');
注意：因为MessageBox是单例的，如果同时显示多个消息框将显示最后一个
Ext.Msg.alert('Title', 'Basic message box in ExtJS');
还可以自己实例化MessageBox类
var msg = Ext.create('Ext.window.MessageBox');
msg.alert('Status', 'This is Ext JS message box.');
实例：点击按钮显示提示框（Alert）
Ext.create('Ext.button.Button',{
text: '点击我',
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.Msg.alert('标题', '这是MessageBox的内容');
}
}
});
确认选择（Confirm）
确认选择（Confirm）
Ext.MessageBox.confirm('标题', '内容', optional callbackFunction());
或者
Ext.Msg.confirm("Confirmation", "Do you want to Save changes?", function(btnText){
if(btnText === "no"){
Ext.Msg.alert("Alert", "You have confirmed 'No'.");
}
else if(btnText === "yes"){
Ext.Msg.alert("Alert", "You have confirmed 'Yes'.");
}
}, this);
点按钮显示确认框（Confirm）
Ext.create('Ext.button.Button',{
text: '点击我',
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.MessageBox.confirm('确认',"内容说明", function(btn){
if(btn === 'yes')
{
console.log('选择了确定Yes');
}
else
{
console.log('选择了确定No');
}
});
}
}
});
显示选择框
Ext.Msg.confirm('Confirm', 'Are you want to updates?',
function (button) {
if ('yes' == button) {
console.log('yes')
} else {
console.log('no')
}
}
);
输入框（Prompt）
填写内容（单行）（Prompt）
Ext.Msg.prompt('标题', '说明', function(button,userInputContext){
console.log(button); //用户点击的按钮
console.log(userInputContext) //用户输入的内容
});
实例：
Ext.Msg.prompt("Ext JS Tutorials", "Please enter your Sencha Id:", function(btnText, sInput){
if(btnText === 'ok'){
Ext.Msg.alert("Status", "You entered:" + sInput);
}
}, this);
显示用户输入框（单行）
Ext.Msg.prompt('标题', '说明', function(button,userInputContext){
console.log(button); //用户点击的按钮
console.log(userInputContext); //用户输入的内容
});
显示用户输入框（多行）
Ext.MessageBox.show ({
title: '标题',
msg: '请输入内容:',
width: 300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
//fn: callbackFunction
});
等待进度框（Wait）
格式
Ext.MessageBox.wait({});
实例：创建一个等待进度条
Ext.MessageBox.wait('内容', '标题');
实例：更多配置参数
Ext.Msg.wait('内容', '标题', {
interval: 400, //循环定时的间隔
duration: 2000,//总时长
increment: 5, //执行进度条的次数
text: '更新中，请稍后...', //进度条上的文字
scope: this, //作用域
animate: true, //加入动画
fn: function () { //执行完成后执行的函数
console.log(123);
}
});
消息框-自定义消息框
格式
Ext.MessageBox.show ({
title: '标题',
msg: '提示语:',
width: 300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true, // this property is for multiline user input.
fn: callbackFunction,
icon: Ext.Msg.QUESTION
});
Buttons属性表示要显示的按钮，可取值：
Ext.MessageBox.OK
Ext.MessageBox.CANCEL
Ext.MessageBox.OKCANCEL
Ext.MessageBox.YESNO
Ext.MessageBox.YESNOCANCEL
buttonText属性用于设置自定义按钮显示的文本：
buttonText:
{
yes : '保存',
no : '不保存',
cancel : '取消'
}
icon属性用于设置显示的图标
Ext.MessageBox.QUESTION
Ext.MessageBox.WARNING
Ext.MessageBox.ERROR
Ext.MessageBox.INFO
实例：显示一个退出提示框
Ext.Msg.show({
title : '保存',
msg : '是否将修改保存到系统中？',
width : 300,
closable : false,
buttons : Ext.Msg.YESNOCANCEL,
buttonText :
{
yes : '保存',
no : '不保存',
cancel : '取消'
},
multiline : false,
fn : function(buttonValue, inputText, showConfig){
Ext.Msg.alert('Status', buttonValue);
},
icon : Ext.Msg.QUESTION
});
实例：Yes NO Cancel三选
Ext.MessageBox.show ({
title: '标题',
msg: '请输入内容:',
width: 300,
buttons: Ext.MessageBox.YESNOCANCEL,
multiline: true,
fn:function(btn,text){
console.log(btn);
console.log(text);
}
});
实例：设置提示图标
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'Do you want to save the file?',
buttons: Ext.MessageBox.YESNO,
fn: function(button){
if('yes'==button)
{
}
else if('no'==button)
{
}
} ,
icon: Ext.MessageBox.QUESTION
});
实例：简单消息框
Ext.MessageBox.show({
title: 'Save Changes?',
msg: 'Do you want to save the file?',
buttons: Ext.MessageBox.YESNO,
fn: function (button) {
if ('yes' == button) {
} else if ('no' == button) {}
},
icon: Ext.MessageBox.QUESTION
});
实例：消息框内放置进度条
使用progress属性开启进度条
使用progressText属性设置进度条的文本
使用.updateProgress方法更新进度条
//显示进度条
var progressMessage = Ext.MessageBox.show({
title: '加载中',
msg: 'Panda Messagebox',
progress: true,
progressText: '进度条中的文本',
width: 300,
closable: true
});
//更新进度条
var step = 1;
function updateProgress(){
if(step >= 100)
{
progressMessage.updateProgress(100,'完成!');
progressMessage.hide();
}
else
{
progressMessage.updateProgress(step++/100,'加载中... ' + step + '%');
}
Ext.defer(updateProgress, 10);
}
Ext.defer(updateProgress, 10);
标签：function,MessageBox,console,button,Ext,UI,Msg,ExtJS 来源： https://www.cnblogs.com/cqpanda/p/16587505.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。