ExtJS 4.2 Walkthrough – Part 3: Under Control(ler)

Yep, I lied. In the last post, I said we were going to start making data models and whatnot. All lies. We could, of course, plow ahead with making a data model. However, our app is not quite ready to support a data model of any kind, so we’d make it and have to set it aside until later. Instead of doing that, let’s just wait to make it until later and spend our time on something that will get us closer to being able to use it. Good? Excellent.

NOTE: Code for this installment can be found on GitHub.

A Bit About Controllers

Controllers within ExtJS 4 MVC apps are the brains of your application, the place where the vast majority of your application’s functionality and logic will (and should be) stored. By design, ExtJS 4 is event driven, so your controllers are really like souped up event listeners.

Pretty much every component (views) and data object (stores, models) will fire off a number of events based on the context. So for example, when your store makes an AJAX request via a server proxy, the store (via the proxy) will fire a load event. In your controller (and elsewhere), you can listen to this event and More >

ExtJS 4.2 Walkthrough – Part 2: Main Layout

In the last post, we jumped through the hoops of setting up a brand new ExtJS 4.2 application, and we even “upgraded” it a bit by switching to the fresher “Neptune” theme. But after all of that, we were left with a fairly lame application. It works, of course, but doesn’t do anything. We need to fix that.

In this installment, we’ll take the mockup that we looked at previously and create some code to prepare the main skeletal sections of the app, including:

  • The header
  • The left side bar
  • The main content area

Getting these in place will let us begin surgically creating various parts of our application. Hooray!

Note: Code for this installment can be found on GitHub.

An Aside: Dynamic Loading

Unless you specifically go another direction, ExtJS 4 applications are going to be a single-page application, driven by a single, “compiled” version of all the JS classes that are required to make your application run.

When developing the application, however, it is certainly not ideal to have to compile the application every time you want to make a change. To facilitate super-rapid development, ExtJS 4 includes a very robust Dynamic Loading system. While we won’t dwell on the intricacies of it here, this Dynamic Loading system allows More >

ExtJS 4.2 Walkthrough – Part 1: Setup

Welcome to the first installment in our series on developing an MVC-style ExtJS 4.2 app!

As mentioned in the Introduction, the app we’ll be developing will be a simple management system for a car dealership. The name of the app is so super-creative it will blow your mind. Are you ready for this?

The name of the app is: Car Tracker

Car Tracker?

Yes, Car Tracker.

That just changed your life forever…you’re welcome 🙂

NOTE: Code for this session can be found on GitHub.

Getting Started

The first step to creating our app is, of course, to make sure that we have the framework, as well as Sencha Cmd, which we’ll use to generate, theme, and compile the app.

Step 1: Extract SDK

Once you’ve downloaded the 4.2.0 SDK, extract the files. I like to put the SDK in a common location. On my Mac, I put mine here:


Ultimately, it doesn’t matter where you put it, as long as you can find it later.

Step 2: Install Sencha Cmd

Once you’ve downloaded Sencha Cmd, More >

New Project: ExtJS 4.2 App Walkthrough

Over the last few months, I’ve been building (and reading about building) a number of applications using the excellent ExtJS 4.2.0. I thought it might be fun/instructive to do something of a short “walkthrough” of the process of building an app…so that’s what I’m going to do :).

In the next series of posts, I’m going to build an MVC-style ExtJS 4.2.0 app, walking through the code and strategy at each step along the way. I hope that it will be entertaining/instructive to code along with me.

The App

The app is not going to be complicated, but I am going to try to hit some major areas of functionality that are common to developing ExtJS 4 apps. While I can’t promise that every bit of functionality will “fit” your real app’s specific needs, I do promise to avoid ridiculous, over-simplistic and unrealistic examples. My intention is to share my experiences from building real apps, not to teach you about every possible aspect of the ExtJS 4 library, regardless of how relevant it may or may not be to what we’re building. Besides, I don’t know every possible aspect of the library anyway, so I would be of less-than-complete help in that More >

Sencha Touch 2: Ext.ux.field.TimePicker

Today I wrapped up work on a custom Sencha Touch 2 form field component called TimePicker which, as indicated by its name, allows you to select a custom time via the faux-OS picker dialog.

There are a bunch of other TimePickers out there for Touch, but most are old or just don’t do what I want them to do. So I made my own 🙂

If you’re interested in using this, head over to my GitHub repo and pull it into your project. There’s a bunch of config, but it’s all documented in the repo.

If you do end up using it, please let me know what you think. I’d love feedback on usefulness, suggestions for improvements, etc.

Share this: More >