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.

extjs_loading

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

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...