Subscribe to our RSS

Preloader Like at ExtJS.com

Tags: , ,

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.

enzo

February 27, 2011

another method to load extjs at runtime:

Preloading Test

$(document).ready(function(){
$(’body’).append( ‘ExtJs wird geladen….’ );
$(’head’).append(
”+
”+

);
$(’body’).empty();

Ext.onReady(function(){
Ext.Msg.alert( ‘Info:’, ‘ist geladen…’ );
});
});

steward

November 15, 2010

Hmm. What is the scripts I want to load depend on a bit of JS trickery? I need to top level domain from the server, ie

var myTld;
myTld = ((m = location.host.match(new RegExp(”\.([a-z,A-Z]{2,6})$”) )) ? m[1] : ‘com’);

…so that if the scripts are not an mysite.com, then they will load the debug versions from mysite.dev

otherwise proceed normally with non-debug files from mysite.com

I begin to doubt it may be possible….

But many thanks for a great contribution.

Darren – ajaxBlender

May 25, 2010

naysleigh,

yes, you can view the preloader working in extjs 2.3 here: http://www.ajaxblender.com/article-sources/extjs/content-preloader/ext-2.3/index.html

naysleigh

May 21, 2010

does the preloader work in extjs 2.3

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.

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 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+)

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?

Leave a comment

Your name

December 7, 2016

Spam protection. Enter result of expression you see in the box below.

7 + 4 =