This Ext.js Progress Bar is used to show the progress of the work done and to show that the backend work is still in progress, hence wait until its done.
Syntax
It is basically a message box showing the progress of the task. Following is a simple syntax to create a Progress bar.
Ext.MessageBox.show ({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false
});
Example
Following is a simple example showing a Progress bar.
<!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() {
function progressBar(v) {
return function() {
if(v == 10) {
Ext.MessageBox.hide();
result();
} else {
var i = v/9;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
function showProgressBar() {
for(var i = 1; i < 11; i++) {
setTimeout(progressBar(i), i*500);
}
}
function result() {
Ext.Msg.alert('status', 'Process completed succesfully');
}
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('buttonId'),
text: 'Click Me',
listeners: {
click: function() {
Ext.MessageBox.show ({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false
});
showProgressBar();
}
}
});
});
</script>
</head>
<body>
<p> Click the button to see progress bar </p>
<div id = "buttonId"></div>
</body>
</html>
The above program will produce the following result −
Next Topic : Click Here