Ext.js custom loaders
If you are building applications using JavaScript frameworks and server side call-backs, you probably know how important is to show loading message to the users, especially for time consuming requests. In this article I will show you some basic methods to create custom loaders when using Ext.js.
First of all we can nicely indicate loading process when starting ext.js application. It’s very simple as all we need to do is to put loading div inside the html body. When ext.js will finish loading scripts, then we simply remove that div from the page. In order to do that, we need to apply removal logic on Ext.ready event.
// html file
<body>
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator">
Loading...
</div>
</div>
</body>
Ext.onReady(function () {
setTimeout(function () {
Ext.get('loading').remove(); //remove element
//fade out to get better UI experience
Ext.get('loading-mask').fadeOut({ remove: true });
}, 1250); //simulate long running process
});
Now, let’s create basic method that applies loading mask to the element passed in
setLoading: function (element, start, styles) {
if (!styles) { styles = "loadingBox"; } //set default styles if not set
if (start) {
element.loadingMask = new Ext.LoadMask(element, { msg: "Loading...", msgCls: styles });
element.loadingMask.show();
}
else {
element.loadingMask.hide();
}
},
And finally, if we want to show loading message when for instance clicking the button, the following code can be applied:
{
xtype: 'button',
text: 'start loading',
width: 150,
height: 50,
style: 'margin:50px',
handler: function () {
var el = this;
me.setLoading(el, true);//show loading message
//do you stuff here
setTimeout(function () {
me.setLoading(el, false); //turn it off
}, 1000);
}
},
Also if you want to customize it a bit, you can do it following way:
//simple fade-In/Out function
fade: function (element, fadeOut) {
if (fadeOut) {
Ext.get(element.id).fadeOut({
opacity: 0,
easing: 'easeOut',
duration: 1000,
remove: false,
useDisplay: false
});
}
else {
Ext.get(element.id).fadeIn({
opacity: 1,
easing: 'easeOut',
duration: 1000
});
}
},
{
xtype: 'button',
text: 'start loading with custom styles',
width: 250,
height: 50,
id: 'button2',
style: 'margin:50px',
handler: function () {
var el = Ext.get('mainPanel'); //render to main panel
me.setLoading(el, true, 'customLoader');//show loading message
me.fade(el, true); //fade out
//do you stuff here
setTimeout(function () {
me.setLoading(el, false); //turn it off
me.fade(el, false); //fade in
}, 1000);
}
},
There is a lot of other ways to show custom loading messages that you can apply. I have attached sample solution for you to test different scenarios based on my example.
Ext_loading
(No Ratings Yet)
Loading...
