sencha-logoWelcome 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:

~me/sencha/extjs/ext-4.2.0

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, go ahead and install the app, following the on-screen guidance. Once you’ve installed it, open Terminal or Windows Cmd Prompt and type “sencha” and run the command. You should see something like the following:

Sencha Cmd v3.1.1.274

If you see this, everything is installed correctly and we’re ready to move on.

Step 3: Setup Your Local Web Application

Since our app is going to have database interactivity, we’re going to want to run it within the context of a web application. Whether you’re using ColdFusion, PHP, .NET, or whatever else, the important thing here is that your HTML file can make same-origin AJAX requests and receive responses. How you configure that is completely your business, but here’s what the folder structure for my entire web application looks like:

  • root
    • config
    • handlers
    • includes
      • images
      • javascript
        • apps
          • cartracker – NEW APP WILL GO HERE!
      • styles
    • layouts
    • ….

If you really need to do cross-origin AJAX requests, that’s certainly possible within ExtJS using JSON-P style requests. This, however, is beyond the scope of what I’m interested in covering here. The principles for developing the app, however, will be precisely the same, so all you’d really have to do is tweak the AJAX bits a little.

Step 4: Generate the ExtJS 4.2.0 App

Phew, now that all that setup/installation nonsense is done, let’s do something fun and generate our new application!

First, open Terminal or Cmd Prompt and paste the following (all one line) and tweak for your setup:

sencha -sdk ~me/sencha/extjs/ext-4.2.0 generate app CarTracker /webroot/myapp/includes/javascript/apps/cartracker
  • -sdk ~me/…  – This is a switch for specifying the location of the SDK we want to use for generating the app. Set the path to the location where you extracted the SDK
  • generate app  –  This is the command that we want Sencha Cmd to execute
  • CarTracker  –  The name(space) of the application…don’t use spaces or weird characters, please
  • /webroot/myapp/…  –  The path where we want the app to be generated

When we run this command, we should see a log of all the things that Sencha Cmd is doing to generate the app. Once the generation process is complete, we can visit the location where we generated the app. Here, we should see a number of new files and folders under /includes/javascript/apps/cartracker (or wherever you chose to generate it).

Before we move on, let’s talk about some of the contents of our generated app:

  • .sencha – This hidden folder contains some important configuration files for Sencha Cmd-related processes, like building and compiling
  • app – This is where the majority of the code that we’ll be writing will live. True to its name, “app” contains our JS application source code
    • controller – In the MVC style of ExtJS 4, “controller” is where our app’s controllers will live, and is where most of the functionality of our app will be coded
    • model – The model folder is where we create definitions for the data objects that we will use in our app, specifically how we will map the data that we retrieve from the server via AJAX into a form that ExtJS’s data objects can understand
    • store – Stores are basically caches of instances of the models we have defined for our data. Stores use proxies to load data (e.g., models), and when configured with a server-style proxy, are instrumental in how we will persist data to the server.
    • view – VIews, in the MVC style of ExtJS, provide the interface of our application. ExtJS provides a really nice set of components which are not only visually rich, but can also be made “data-aware” simply by being configured with data objects like stores.
  • ext – This is a partial copy of the SDK that we downloaded earlier
  • overrides – A convenient location for including overrides to the framework (for between-release bug fixes, custom overrides, etc). By convention the overrides folder will be included when building the app
  • packages – This is where reusable and redistributable “packages” are stored (such as translations, themes, etc).
  • resources – A handy place to store assets for your application (extra css, images, etc)
  • sass – Where theme-related code for your app can be stored/modified/etc.

If you’ve never developed an ExtJS 4 app before, it’s important to keep in mind that the MVC architecture is largely convention driven. While there are mechanisms for overriding the conventions, “playing nice” with them will not only save you a lot of headaches, but will make you very productive.

Step 5: Neptune it Up

At this point, we have an application…kind of. If you open the “cartracker/index.html” in your browser, you should see a panel on the left lableled “West”, and another in the center labeled “Center Tab 1″.

ClassAppScreen

While it’s not much, it does show that a working app (simple as it may be) was successfully generated and is just waiting in breathless anticipation to be made totally awesome.

But before we start hacking away at this, we absolutely HAVE to do something about the aesthetic. You’ll notice the app’s theme is currently using the infamous “ExtJS blue” (or “classic” as it’s now called). While it looked really sweet like 5 years ago, it’s starting to show its age. So let’s make this a bit sexier by switching to use ExtJS’s brand-spanking-new “Neptune” theme.

To do this, browse to

.sencha/app/sencha.cfg

On line 33 (or so), change the following:

# The name of the package containing the theme scss for the app
app.theme=ext-theme-classic

To:

# The name of the package containing the theme scss for the app
app.theme=ext-theme-neptune

As is pretty obvious from the change, we are telling our app that we’d like to use the “ext-theme-neptune” theme instead of the default “ext-theme-classic.”

As we’ll see later, the available themes for ExtJS 4.2.0 are found in packages.

If we refresh our app’s main HTML page in the browser, we’ll see….no change. The same old-school blue theme will still be in effect. This is because even though we’ve changed the configuration of our app to use the new theme, the generated assets of our application don’t know about this change yet. For example, if you open the “bootstrap.css” file at the root of your ExtJS app, you’ll see the following:

@import 'packages/ext-theme-classic/build/resources/ext-theme-classic-all.css';

Now that we’ve instructed our app about which theme to use, we need to rebuild the application in order to apply the changes. To rebuild the app, go back to Terminal, make sure you are at your ExtJS app’s root, and issue the following command:

sencha app build

Among other things, the build command will regenerate the bootstrap.css and will change the path of the CSS to use the fully built version of the Neptune theme.

Personally, I prefer to use the non-built CSS from the packages/ext-theme-neptune folder, since I don’t like to build over and over and over just to see style changes. If you feel the same way, an easy way to use the Neptune theme without building the app is simply to change the bootstrap.css to use the Neptune CSS, like so:

@import 'packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css';

Regardless of the direction you went, if we now refresh our app’s main HTML file, we should see the newer, sexier skin of the Neptune theme:

InitialAppScreen

More padding, better font sizes. Beautiful.

Step 6: Stubbing Out the Application Frame

Before wrapping up this installment, let’s mockup the frame of our application. Our app will consist of three main sections, or divisions:

  • A header at the top for the name of our app (and any links, buttons, etc. that will be used globally for our app)
  • A sidebar on the left for our app’s main navigation menu
  • A section in the main content area where all of our interactive interfaces will be displayed

In the end, it will very roughly look like this:

AppStub

 

Pretty dang exciting, huh? Sure, it’s not going to win any design awards. But when we’re done, it will be clean and easy to use…perfect for internal management software.

Conclusion

In this installment, we looked at the process of installing the ExtJS SDK, generating an application, and configuring our application to use the sexy new Neptune theme. While this is not the most exciting work, it is absolutely critical. After all, since the app we’re developing will ultimately be a single-page app running off of a single, compiled JavaScript file, getting the setup and configuration correctly now will save us a mountain of headaches later on.

So let’s take a break here and congratulate ourselves on generating and building a functional application. In the next section, we’ll look at how to translate our mockup into a workable layout and, finally, get into some code. Hooray!