ExtJS - UI组件 - MessageBox

更新记录
转载请注明出处: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);