In a recent article I overview the major community/commercial projects in HTML5 for HTML5 Game Frameworks as well as HTML5 App Frameworks. One of the app frameworks I listed there is the Sencha Ext JS 4 Application Development Framework. This post serves as a tutorial to get you started.

The full source code and 3 HD Screencast Video are available far below. For general questions. please comment below. For RMC’s Consulting services, please contact us today!

Before You Start

Before you follow along with this tutorial you’ll need to setup the development environment for Sencha. This includes a web browser, a web server, and a text editor (or code IDE). I’m using a Mac Computer  w/ Chrome Browser, Mac Web Server, and Komodo Edit. I’m new to Komodo Edit and cannot yet recommend it.

Follow the setup instructions here in the Sencha Getting Started docs.

1. Hello World For Application Development

Typically a Hello World program illustrates the quickest way to get anything (such as text) onto the screen and publishing (or compiling) without errors.

In this post I have also added a few things. We see a Sencha component (Viewport), Sencha classpathing (src), a custom super class, a custom subclass, and an example of a mixin class (which allows for something like multiple inheritance).

The Project Output

Here is the example running. I show it running in both Desktop browser and iOS (through an emulator I have – provided by Apple, not Sencha). Sencha also offers a ‘Sencha Touch’ library that is built specifically for mobile. I’m NOT using that here. I’m just using the mobile browser to show (not-specifically-mobile) HTML5 content. Works pretty good.

Debugging: In the chrome window, its clear that the bottom is using Chrome’s Built-In View->Developer->Developer’s Tools which Sencha outputs to very nicely.

In Chrome on Mac

In iOS (Via Emulator)

The Project File Structure

Sencha’s official getting started recommends some (optional) folder structure. I choose something I feel more comfortable with here;

The Entry Point

You can see the index.html loads 3 external files.

1. Styles

I’m using the default CSS I found in some basic tutorials. I have not yet added/edited any styles. In the future I’ll study more on what’s possible.

2. Libs

There are a few choices that ExtJS gives you out of the box, each with their own distinct advantages or disadvantages. You only need to use one.

Here is a rundown of each of the files.

• ext-all-debug-w-comments.js – Debug version of the entire framework, with comments. This is the largest file of the bunch and requires the most processing to display in browsers.
• ext-all-debug.js – Same as above, but without the comments. Still very large, but very good for debugging in most cases.
• ext-all.js – The entire framework concatenated and minified. Debugging is impossible with this file, so it should be used for production systems only.
• ext-debug.js – This file contains the Ext JS foundation and white-space. With this file, you can remote load all of Ext JS as needed, and it provides the best debugging experience. The tradeoff is that it’s the slowest.
• ext.js – The minified version of ext-debug.js.

3. App

The app.js file is the entry point for your custom code. It is where you put all your custom stuff as well as the ‘src’ folder and the ‘assets’ folder.

Within my custom code I show off a few interesting things;

Components

I have not dug deep into Senchas Component library but DAMN there are many good looking components. There are components for Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, Drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC, and more!

Here is a simple example of a ViewPort (basically a 100% 100% canvas within-which you can put panels or other things).

Classpathing

Sencha has a nice way to separate your code into classes and your classes into packages. The root of all your packages is your source folder or your ‘classpath’ in Adobe Flex parlance – if you are familiar with that. Classes/packages help greatly with both organization and debugging (breakpoints and errors show you (more) clearly where the problem is).

First we configure one (like here) or more classpaths

And to load and use a class from the main app…

I read in the documentation that the process is called ‘dynamically loading’ of classes. Coming from Flex, I thought ‘dynamically’ meant something really special. But it doesn’t. It means this ‘feels just like Flex  – Classes can import each other as needed, and then you just run the program’. Since JavaScript does not natively support OOP development just about every HTML5 framework requires the developer to use some framework-level conventions to mimic OOP. In the case of Sencha it seems to work quite nicely.

Here is the super class.

Here is a subclass which extends that super class.

Here is a mixin class which the subclass uses.

2. ExtJS MVC Template

If you enjoyed (and understood) the ‘Hello World’ example above, here is something more advanced for you.

In the spirit of the Robotlegs MVC Templates I created for AS3/Flex projects, I created an ExtJS MVC Template.

The idea of the template is to create (and later evolve slightly) a polished, simple example of an MVC app. This can serve as a starting point for all new ExtJS projects. MVC is a popular methodology to separate the model (data), view (user interface stuff), and controller (the ‘what’ that happens when you click UI and stuff).

The app features a simple ui with ‘load’ and ‘clear’ buttons. The load (See ‘Figure 1′) button from the view communicates to the controller which loads data from the model into the view. Clear works in a similar way (See ‘Figure 2′). Its very basic, but illustrates some key concepts about Sencha.

Figure 1.

Figure 2.

Checkout the full source code and 3 HD Screencast Videos (See ‘Member Resources’ below).

Conclusion

As part of my evaluation of HTML5 App Frameworks, I need to look at some other frameworks before I give an educated opinion. However, I’m happy with what I see in Sencha. The language looks good, the styling appears to be very flexible and robust, and the components (from a user’s perspective) look and feel great.

Some things I’d like to do next; I may try to make a blog reader app to load xml, parse it and populate a data grid as a future project with Sencha. I’d like to create a more complex OOP example which includes private/public members and fires events. All of which I know how to do, but have not documented yet. I’d also like to create a Sencha Touch demo or 2, which I think will be 99% identical code, but more suited for running on mobile as an app rather than the demos above which are for web browsers.

Next Steps

• Hello World – Download the full source code*
• Hello World – Watch the HD Screencast Video Tutorial*
• ExtJS MVC Template – Download the full source code*
• ExtJS MVC Template – Watch the HD Screencast Video*
• For general questions. please comment below. Thanks!
• For RMC’s Consulting services, please contact us today!

*See ‘Member Resources’ below.

Member Resources