It has been a while since I’ve blogged, and during my absence, Sencha went and released Ext JS 5. If you haven’t already, check out all the new features of both 5.0.0 and 5.0.1. I will admit that I am extremely excited to start using it…especially the MVVM architecture. I’m impressed that Sencha keeps evolving their framework, even so soon after such a radical change to MVC in Ext JS 4. While such adjustments might create frustrations for others, I see it as a good sign that the framework is on a good path and has momentum for the future.

So enough with the free promotional copy. Since I am, like many, just starting to get my feet wet with all the changes in Ext JS 5, I thought it might be interesting to do a series of short articles about some of new features. Over the next few weeks, I hope to cover a number of topics, including (but not limited to):

  • Routing (hooray!)
  • Data binding
  • View models and controllers
  • Chained stores
  • Grid widgets
  • Breadcrumbs
  • more…!

Let’s get started, shall we?

A New Version, A New App

There is, of course, a migration guide for upgrading your 4.x app to Ext JS 5. But that’s lame. We want to start with something new!

Get Sencha Cmd 5

First things first, you’ll need to get the most recent version of Sencha Cmd. If you already have a previous version installed, simply open Terminal and upgrade:

sencha upgrade

That was hard, huh?

Generate App

Now we’re in good shape to generate our first Ext JS 5 application. You can do this a few ways:

  1. Download the SDK and generate from that
  2. Let Sencha Cmd get the SDK for you

Honestly, I’m not sure if Option #2 was available before in Sencha Cmd, but the docs indicate that it’s only for the commercial version. Since we want the GPL version, let’s stick with the tried-and-true Option #1 (get the SDK here):

sencha -sdk /...mypath.../ext-5.0.1 generate app ExtJS5Explorer /somepath/extjs_5

Nothing major here. We simply switch to the correct SDK home, name our app (ExtJS5Explorer), and tell it where to generate the app. Done.

Ok, now for the cool part. Sencha Cmd 5 now includes the very cool watch command. While I can’t do it justice in such a short description, it is basically a “watcher” of your app that responds to any and all changes that you make within your app. If you add a new class, update your sass, or pretty much do anything else within your app, the watcher in the background will automatically rebuild all the bootstrapping that makes rapid development changes possible…all without having to manually rebuild, refresh, or recompile stylesheets. Pretty cool, huh?

To get watch up and running, simply open Terminal, navigate to your new app home, and run the following:

sencha app watch

One FREAKING AWESOME part of this process is that Sencha Cmd will actually spin up a simple web server and map your application to it (the default is http://localhost:1841). This means, of course, that you no longer have to hassle with setting up a site *just* to develop on your Ext JS app…Sencha Cmd now takes care of all of this for you. Now that is cool.

View the App

If we now navigate to http://localhost:1841, we should see a fairly familiar looking Ext JS proto-site.

GettingStarted-Neptune

Ok, that’s fine, but the Neptune theme is SOOOO Ext JS 4. Ext JS has moved on to the next version, and includes a new theme called Crisp. So let’s use that. To make the switch, go into your application’s files, locate the app.json file in the root, and update the theme configuration to “ext-theme-crisp”.

Now, if you happen to have Terminal visible, the moment you save the app.json you should see Sencha Cmd’s watcher spring to life. Because it has detected a change in our app’s configuration, it’s going to rescan and rebuild based on the changes. In this case, it needs to overwrite a stylesheet to reflect our aesthetic change. If we reload our app now, we should see the same content, but a different theme.

GettingStarted-Crisp

Yes, yes, I agree. Crisp is not *amazing*, but it is a nice change from the deluge of blue in Neptune. So let’s call it good and stick with it.

Next Steps

In this session, we’ve taken some nice steps toward building an Ext JS 5 app. Besides getting our app generated, we’ve seen the awesome new capabilities of Sencha Cmd in action, and are in really good shape to start hacking away, In our next installment, we’ll add an important piece that will be crucial for the rest of what we explore: ROUTING.

Conclusion

In the previous posts I’ve done on Ext JS, I’ve received a lot of great feedback, corrections, and suggestions. Please, please, please make your voice heard if you notice me skipping steps or just want to discuss some aspect of the material that is covered. Thanks!