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 examples and documentation

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."


A Sencha Touch tab panel example

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

Sencha ActionSheet examples

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)

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: