Ext.js – Yes NO Cancel Box is like a confirm box which asks the user for some confirmation, such as whether the user wants to do the task or decline or cancel the task. Based on the user selection different methods get called.
Syntax
Following is a simple syntax.
Ext.MessageBox.show ({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.YESNOCANCEL
// this button property for all three options YES, NO, Cancel.
});
Example
Following is a simple example showing the usage.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('msgBox'),
text: 'Click Me',
listeners: {
click: function() {
Ext.MessageBox.show ({
title: 'Details',
msg: 'Please enter your details:',
width:300,
buttons: Ext.MessageBox.YESNOCANCEL,
multiline: true,
fn: callbackFunction
});
function callbackFunction() {
Ext.Msg.alert('status', 'Details entered succesfully');
}
}
}
});
});
</script>
</head>
<body>
<p> Click the button for alert box </p>
<div id = "msgBox" ></div>
</body>
</html>
The above program will produce the following result −
Next Topic : Click Here