Ext JS 消息提示框

消息框

Ext.window.MessageBox是在Ext JS中创建消息框的主类，看一下该类的继承树，它属于window的子类：

Ext.MessageBox和Ext.Msg都是Ext.window.MessageBox的单例实例，故而不必去创建Ext.window.MessageBox的对象来显示消息框。和原生JavaScript的区别在于：使用Ext.Msg不会阻塞代码。有些操作需要等用户反馈的，可以放在回调函数里面。主要有四种类型的消息框：

Alert：

Ext.Msg.alert('Status', 'This is Ext JS message box.');

因为单例模式的原因，同时写两句也只是显示最后那句：

Ext.Msg.alert('Status', 'This is first Ext JS message box.');
//只有会显示后者，前者被覆盖 
Ext.Msg.alert('Status', 'This is second Ext JS message box.');

也能像这样，滞后创建：

var msg = Ext.create('Ext.window.MessageBox');
msg.alert('Status', 'This is Ext JS message box.');

Prompt：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.Msg.confirm("Confirmation", "Do you want to Save changes?", function (btnText) {
            //回掉函数，处理反馈
            if (btnText === "no") {
                Ext.Msg.alert("Alert", "You have clicked 'No'.");
            } else if (btnText === "yes") {
                Ext.Msg.alert("Alert", "You have clicked 'Yes'.");
            }
        }, this);
    }
});

Confirm：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        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);
    }
});

Custom：

Ext.application({
    //引入消息提示框所属类，在其基础上面改造
    requires: ['Ext.window.MessageBox'],
    name: 'SenchaTutorial.com',

    launch: function () {
        Ext.Msg.show({
            title: 'Save',
            msg: 'Do you want to Save the changes? ',
            width: 300,
            closable: false,
            //按钮类型：YES、YESNO、YESNOCANCEL，会被按钮定义覆盖
            buttons: Ext.Msg.YESNOCANCEL,
            //按钮定义
            buttonText: {
                yes: 'Yes & Continue',
                no: 'No & Continue',
                cancel: 'Discard'
            },
            //多行输入框
            multiline: false,
            //用户点击按钮后的回掉函数
            fn: function (buttonValue, inputText, showConfig) {
                Ext.Msg.alert('Status', buttonValue);
            },
            //图标文件：ERROR、INFO之类的
            icon: Ext.Msg.QUESTION
        });
    }
});