Preload ExtJS. How to Create a ExtJS Preloader with a message like on extjs.com. ExtJS Tutorials.

Preloader Like at ExtJS.com

The ExtJS 3.0 library is a little large and can require a few seconds to load all the scripts for the page. Therefore the most convenient way address this is to create a preload message which will let your users know that the loading is in process.

Preface

Steps to create the ExtJS preloader:

Create a loading layer, which will contain the progress indicator and display messages while external files (i.e. JavaScript, CSS code, etc.) are loading.
Add a few lines of CSS code to stylize the loading layer.
Add JavaScript code to hide the layer when all external files are loaded.

Important! You should place any CSS code indented for stylizing the loading layer inside of <head>…</head> tag. Place any links to JS, CSS and other files just after your <body>…</body> tag.

Implementation

Let’s start from the loading layer. You should create the following HTML code for it:

<body>
     <div id="loading-mask"></div>
     <div id="loading">
          <span id="loading-message">Loading. Please wait...</span>
     </div>
</body>

<div id=”loading-mask”> will be our overlay layer which will be placed at the top of the page’s content. We will hide it once the data is fully loaded by the preloader. <div id=”loading”> is the layer which will be placed at top of “loading-mask” and it will be used to display a progress indicator and loading messages.

Use the following CSS code to stylize the content loader. Remember to insert this CSS inside of your <head>…</head> tag:

<style type="text/css">
HTML, BODY { height: 100%; }
#loading-mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000000;
     z-index: 1;
}
#loading {
     position: absolute;
     top: 40%;
     left: 45%;
     z-index: 2;
}
#loading SPAN {
     background: url('/article-sources/images/loader.gif') no-repeat left center;
     padding: 5px 30px;
     display: block;
}
</style>

Now, when you have the loading layer, let’s load two JS files. We will be using a common JavaScript to update the progress messages (preload message) while the data loads. Remember to insert this code inside of the <body>…</body> tag, just after the code for loading layer:

<script type="text/javascript">
     document.getElementById('loading-message').innerHTML = 'Loading Core API...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-base.js"></script>
<script>
     document.getElementById('loading-message').innerHTML = 'Loading ExtJS 3.0 ...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-all.js"></script>

After this, you use use ExtJS code to fade out the loading message and remove the loading overlay layer from the page:

<script type="text/javascript">
Ext.onReady(function(){
     var loadingMask = Ext.get('loading-mask');
     var loading = Ext.get('loading');
     //  Hide loading message
     loading.fadeOut({ duration: 0.2, remove: true });
     //  Hide loading mask
     loadingMask.setOpacity(0.9);
     loadingMask.shift({
          xy: loading.getXY(),
          width: loading.getWidth(),
          height: loading.getHeight(),
          remove: true,
          duration: 1,
          opacity: 0.1,
          easing: 'bounceOut'
     });
});
</script>

That’s it for the ExtJS preloader ;) Click the View Demo button to view the code in action.

View Demo

Leave a Comment

Jason R.

November 3, 2009

thanks for posting this tutorial! i found your jquery tutorial on it, but i needed it for extjs. will this work in all browsers?

ajaxBlender.com

November 3, 2009

Yes, certainly. This code will work in all modern browsers (Mozilla Firefox, Apple Safari, Opera 9+, Google Chrome and MS Internet Explorer 6+)

Simon Schick

November 10, 2009

Hi,

This tutorial is realy useful – but I just want to say that this function is still implemented in the extjs version 3.0

The only thing is – you can’t show this preloader while extjs is loading :)

Bye
Simon

ajaxBlender.com

November 10, 2009

Hi Simon. Yes, you are absolutely right and thank you for your comment. This helps us to clarify the purpose of the tutorial – to create a pre-loader before the ExtJS is available in DOM.