Ext JS 4: Simple Splash Page

Sometimes you need a simple splash page while your Ext JS site is loading. Thanks to IvanJouikov at the Sencha forums for the simple solution and helpful post at http://www.sencha.com/forum/showthread.php?230118-Splash-Screen&s=b823569ad51889a57ab5bcef408fc3c6&p=947869&viewfull=1#post947869

I modified a little bit for my situation (no images, just text) and to not use the deprecated center tag.

I added the following to the css:

#loading-parent {
  position: absolute;
  z-index:  20001;
  height: 100%;
  width: 100%;
  padding-top: 50px;
  text-align: center;

#loading-indicator {
  font-size: large;
  font-family: tahoma,arial,verdana,sans-serif;
  text-align: center;
  margin: 0 auto;

And in the HTML I put this in the body section:

<div id="loading-parent">
  <div id="loading-child">
      <div id="loading-indicator">Loading My Application.  Please wait...</div>

And then the code was just as in the post in the forums. In the launch method of the MVC application:

launch: function() {
  var me = this;
  // Create the actual viewport in body
  Ext.create('My.view.Viewport', {
      renderTo: Ext.getBody(),
      listeners: {
          afterrender: function() {
              var mask = Ext.get('loading-mask'),
                  parent = Ext.get('loading-parent');
              // Destroy the masks
              mask.fadeOut({callback: function(){ mask.destroy(); }});
              parent.fadeOut({callback: function(){ parent.destroy(); }});

Version Info: Ext JS 4.1.1
Tested on IE8, Chrome and Firefox


One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s