Create Messagebox in ExtJS : Sample Example
Creating Message Box in ExtJS
Creating Message box is simple task. You need to provide some basic settings in order to create Message Box.
Ext.Msg.show({ title : 'Choose Language', msg : 'Are you Comfortable in ExtJS ?', width : 300, buttons : Ext.MessageBox.YESNOCANCEL, fn : myCallbackFunction, icon : Ext.MessageBox.ERROR })
Properties :
Button Property : Which Buttons to Display
buttons : Ext.MessageBox.YESNOCANCEL
title Property : Title On the Message Box
title : 'Choose Language'
msg Property : Message On Message Box
msg : 'Are you Comfortable in ExtJS ?'
fn Property : Function to be Called after clicking on button. Name of the Button is passed to Callback function.
fn : myCallbackFunction
icon Property : Displays Icon On the Messagebox
icon : Ext.MessageBox.ERROR
Live Sample Code :
<html> <head> <title>Sample Messagebox Example</title> <linkrel="stylesheet"type="text/css" href="lib/extjs/resources/css/ext-all.css"/> <script src="lib/extjs/adapter/ext/ext-base.js"></script> <script src="lib/extjs/ext-all-debug.js"></script> <script> Ext.onReady(function() { var myCallbackFunction = function(btn, text) { alert('You pressed ' + btn); if (text) { alert('You entered : ' + text) } } Ext.Msg.show({ title : 'Choose Language', msg : 'Are you Comfortable in ExtJS ?', width : 300, buttons : Ext.MessageBox.YESNOCANCEL, fn : myCallbackFunction, icon : Ext.MessageBox.ERROR }) }); </script> </head> <body> <!-- Nothing in the body --> </body> </html>