ExtJS - Msg and MessageBox

extjs

http://dev.sencha.com/playpen/docs/output/Ext.MessageBox.html
http://dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.js

How to display a basic alert?

Ext.Msg.alert('Title', 'Message.');

How to display a basic prompt?

// Prompt for user data and process the result using a callback:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // process text value and close...
    }
});

How to display a please wait message without any button and lock the screen?

Ext.MessageBox.show({
    title: 'Processing',
    msg: msg,
    width: 400,
    icon: Ext.MessageBox.INFO,
    closable: false,
    fn: function(btn) {}
});

To hide the above dialog:

Ext.MessageBox.hide();

How to use MessageBox to display a progress dialog?

Ext.MessageBox has methods named progress, wait, updateProgress, updateText which can be used to display a progress dialog.

var progressDialog = Ext.MessageBox.wait('Please wait.  This may take a few minutes.', 'Processing'); 
progressDialog.hide();

function select_checkboxes_in_chunks(ar, num, interval, initialQuantity, sm, keepExisting, suspendEvent) {
    // This function will call itself until ar.length returns 0.  
    var min = Math.min(num, ar.length);
    var i = 0;
    // Display the modal dialog if it is not already displayed.

    if (select_checkboxes_in_chunks_msgbox_visible === false) {
        Ext.MessageBox.show({
            title: 'Processing',
            msg: '<span>Selecting ' + initialQuantity + ' value(s).  Remaining: ' + '<span id="progress">' + ar.length + '</span></span>',
            width: 400,
            icon: Ext.MessageBox.INFO,
            closable: false,
            fn: function(btn) {}
        });
        select_checkboxes_in_chunks_msgbox_visible = true;
    }

    var selected = ar.splice(0, min);
    sm.select(selected,keepExisting,suspendEvent);

       Ext.get('progress').update(ar.length);

    if (ar.length > 0) {
        setTimeout(function() { select_checkboxes_in_chunks(ar,num,interval,initialQuantity, sm, keepExisting, suspendEvent); }, interval);
    } else {
        // There is nothing left to do. Just close the modal dialog.
        Ext.MessageBox.hide();
        select_checkboxes_in_chunks_msgbox_visible = false;
    }
}

After I wrote the above function, I've learned of better way to optimized ExtJS. However, the above approach for handling large amount of front-end work (if you must absolutely do it on the browser side) still hold true. The select_checkboxes_in_chunks method above need to do a large amount of work on the browser side, so it invokes itself using setTimeout, display a progress dialog, and automatically close the progress dialog when it is done.

How to do something when the message box is close?

Ext.MessageBox.show({
    title: 'Information', 
    msg: 'Some message',
    width: 400, 
    buttons: Ext.MessageBox.OK, 
    icon: Ext.MessageBox.INFO, 
    closable: false,
    fn: function(btn) {  }
});

Notice the closable configuration setting is set to false, and the fn configuration setting is assigned a function.

How to use MessageBox?

Ext.MessageBox.INFO
Ext.MessageBox.QUESTION
Ext.MessageBox.WARNING
Ext.MessageBox.ERROR

// Show a dialog using config options:
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
});

How to use MessageBox as a modal box (resizing a MessageBox):

function inPageModal(opt) {
    if ((typeof(opt.height) == 'undefined') || (typeof(opt.width) == 'undefined')) {
        alert('Oops.  Please define height and width.');
        return false;
    }
    if (typeof(opt.msg) != 'undefined') {
        Ext.Msg.show(opt);
        var mb = Ext.Msg.getDialog();
        mb.setSize(opt.width, opt.height);
    } else {
        Ext.Ajax.request({
            url: opt.url,
            success: function(response, x) { 
                opt.msg = response.responseText; 
                Ext.Msg.show(opt); 
                var mb = Ext.Msg.getDialog(); 
                mb.setSize(opt.width, opt.height); 
            }
        });
    }
}

Ext.MessageBox.INFO
Ext.MessageBox.QUESTION
Ext.MessageBox.WARNING
Ext.MessageBox.ERROR

// Basic alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');

// Prompt for user data and process the result using a callback:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // process text value and close...
    }
});

// Show a dialog using config options:
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
});

How to use MessageBox as a modal box (resizing a MessageBox):

function inPageModal(opt) {
    if ((typeof(opt.height) == 'undefined') || (typeof(opt.width) == 'undefined')) {
        alert('Oops.  Please define height and width.');
        return false;
    }
    if (typeof(opt.msg) != 'undefined') {
        Ext.Msg.show(opt);
        var mb = Ext.Msg.getDialog();
        mb.setSize(opt.width, opt.height);
    } else {
        Ext.Ajax.request({
            url: opt.url,
            success: function(response, x) { 
                opt.msg = response.responseText; 
                Ext.Msg.show(opt); 
                var mb = Ext.Msg.getDialog(); 
                mb.setSize(opt.width, opt.height); 
            }
        });
    }
}