ExtJS 4: Beginner

Showing posts with label Beginner. Show all posts

Saturday, August 11, 2012

ExtJS–Message Box

1 comment: at 5:51 AM Labels: Alert, Beginner, ExtJS, MessageBox, Prompt Box

Ext.Msg is a singleton based on Ext.MessageBox class generating different types of message boxes.

There are four types of Message boxes
alert
- Display a read-only message box with OK button (similar to javascript alert).
	
Ext.Msg.alert('Alert Box',
					'This is a alert box.  Html element
');

// To capture feedback
Ext.Msg.alert('Alert Box', 'This box will capture feedback.',
					function(buttonId) {
						Ext.Msg.alert('Feeback', "Button Clicked : " + buttonId);
					});	
The live example can found here
confirm
Ext.Msg.confirm() displays a confirmation message box. It displays a message with Yes and No button. The code snippet is given below.
	
		Ext.Msg.confirm('Confirm Box', 'Do you wish to continue?', function(
				buttonText) {
			if (buttonText == "no") {
				Ext.Msg.alert('No', "You clicked no");
			}
			if (buttonText == "yes") {
				Ext.Msg.alert('Yes', "You clicked yes");
			}
		});
The live example can be found here
prompt
Prompt box can be used to get user input similar to javascript’s prompt. It has “ok” and “cancel”. The code snippet is given below
Ext.Msg.prompt('Prompt', "Enter your name? ", function(btnTxt,
					inputText) {
				if (btnTxt == 'ok') {
					Ext.Msg.alert("Prompt ", "Your name is "+inputText)
				}
			});
The live example can be found here
Displaying a Custom Message Box
Ext.Msg.show() should be used display a custom message box. We can configure the title, msg, dimension, buttons, call back function, icon.
List of button types

Ext.MessageBox.OK
Ext.MessageBox.YES
Ext.MessageBox.NO
Ext.MessageBox.CANCEL
Icon can be

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

Ext.Msg.show({
				title : 'Show Message Box',
				msg : 'Please enter your address',
				width : 300,
				buttons : Ext.Msg.OKCANCEL,
				multiline : true,
				icon : Ext.window.MessageBox.INFO
			});

The live example can be found here