How to add a Sencha ExtJS splash (loading) screen

I’ve written a couple of small Sencha ExtJS applications lately, and I can confirm that the following technique works to display a splash screen while your application is loading.

(This isn’t a tutorial per se. I assume that you know how to use ExtJS, and just want to see how to implement a splash screen (loading page) as the user waits for the application to load.)

In short, you’ll want code like this in your Ext.application function:

Sencha Touch refs - app.js with 'paths' configuration alvin June 2, 2014 - 6:25pm

Until now I haven’t had a Sencha Touch app.js example out here, so here’s one:

Sencha Touch refs examples and documentation alvin June 2, 2014 - 6:17pm

I normally don’t like to throw large blocks of code out here, but the following Sencha Touch source code shows how to use the refs config parameter.

refs documentation

Before getting to the source code, here are the refs comments you’ll find in the code:

"In the refs configuration, you can set up references to view instances. This allows you to retrieve and manipulate components on the page inside of your controller’s actions."


Sencha Touch store examples (showing model, proxy, JSON, REST, static fields) alvin June 2, 2014 - 6:09pm

The following Sencha Touch code shows how to define a Store, where the store references a model, has a proxy, and also uses some configuration parameters to help control the REST/GET URL/URI the store generates:

How to dynamically generate Sencha Touch radio buttons (Ext.field.Radio) alvin June 2, 2014 - 6:01pm

The following controller code shows how I dynamically render radio buttons in a Sencha Touch controller. Just scroll down and look for the recordedStreamsStore.each block of code:

My Sencha Touch utilities (JSON, error message, dump object, REST URLs) alvin June 2, 2014 - 5:52pm

The following code shows my current Sencha Touch utilities. Much of it comes from a Packt book I can’t remember the name of, but several of the JavaScript functions are my own:

A Sencha Touch title bar (titlebar) example alvin June 2, 2014 - 5:48pm

This code shows how to add a title bar (titlebar) to a Sencha Touch panel:

A Sencha Touch tab panel example alvin June 2, 2014 - 4:21pm

The following code shows how I created a tab panel in a Sencha Touch application, with a few important parts highlighted:

Sencha ActionSheet examples alvin June 2, 2014 - 10:30am

The Sencha website has a few good examples of how to use an ActionSheet, including this basic one:

Setting item margins in Sencha Touch (and ExtJS) alvin June 2, 2014 - 9:58am

The following code shows how I set the margins on a Sencha Touch component (an item in a list of items):

    xtype: 'container',
    style: 'text-align: left; margin-left: 26px; margin-top:14px;',
    html: '<div>Funny - 20<br/>Voted Yes, But Not Worth It - 2</div>',
    id: 'checkboxView',

As shown, you do this by setting the style on the component.

It seems like the following code should have also worked, but it didn’t: