sencha

sencha

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

Sencha Touch refs - app.js with 'paths' configuration

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

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

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

and:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

Sencha Touch store examples (showing model, proxy, JSON, REST, static fields)

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

How to dynamically generate Sencha Touch radio buttons (Ext.field.Radio)

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

My Sencha Touch utilities (JSON, error message, dump object, REST URLs)

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

A Sencha Touch title bar (titlebar) example

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

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

Sencha ActionSheet examples

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

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

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:

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.