EXT.MessageBox Samples

By | January 23, 2013

Generating different styles of message boxes

// Basic alert Ext.MessageBox.alert(‘Status’, ‘Changes saved successfully.’);

// Show a dialog using config options
Ext.Msg.show({
      title:’Save Changes?’,
      msg: ‘Your are closing a tab that has unsaved changes. Would you like to save your changes?’,
      buttons: Ext.Msg.YESNOCANCEL,
      //fn: processResult,
     animEl: ‘elId’
});

//Prompt for user data:
Ext.Msg.prompt(‘Name’, ‘Please enter your name:’, function(btn, text){
if (btn == ‘ok’){
// process text value…
}
});

// Fit to Ext Js 3.X only not Ext JS 4.X
Ext.Msg.show({
title: ‘Milton’,
msg: ‘Have you seen my stapler?’,
buttons: {
yes: true,
no: true,
cancel: true
}
});

// Button text strings that can be overridden for localized language support
// Supported properties are: ok, cancel, yes and no
Ext.MessageBox.buttonText.yes = “சரி”;
//Show a dialog using config options
Ext.Msg.show({
title:’Save Changes?’,
msg: ‘Your are closing a tab that has unsaved changes. Would you like to save your changes?’,
buttons: Ext.Msg.YESNOCANCEL,
//fn: processResult,
animEl: ‘elId’
});

// Function call
var myCallbackFunction = function(btn, text) {
alert(‘You pressed ‘ + btn);
if (text) {
alert(‘You entered : ‘ + text)
}
}

Ext.Msg.show({
title : ‘Choose Source Code’,
msg : ‘Are you Comfortable in ExtJS ?’,
width : 500,
buttons : Ext.MessageBox.YESNOCANCEL,
fn : myCallbackFunction,
icon : Ext.MessageBox.ERROR
});

// Confirm Message Box and action Button
Ext.MessageBox.confirm(‘My Test’, ‘Confirm Action Yes/No ?’,decision);
function decision(buttonId){
if (buttonId === ‘yes’){
alert(“YES”);
}
if (buttonId === ‘no’){
alert(“NO”);
}
if (buttonId === ‘cancel’){
alert(“CANCEL”);
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *