sencha-logoAs with all software, each version of ExtJS ships with the following:

  • Bugs
  • Known issues
  • “Would-be-nice” features that didn’t make the prior release

Fortunately, the ExtJS team is constantly tweaking, fixing, and improving the framework. With each round of development, they’ll do various releases…some major like 4.2, others minor like the recent 4.2.1.

Should I Upgrade?

With each new release, you have an important decision to make: will you continue using the version that you have (which is presumably working), or take a chance and upgrade?

What do I mean by “take a chance”?

With each new version, the full framework is re-released, and the upgrade you’ll make is total (unless you hack new changes into your existing version, which is definitely not advised…). While 99% of the changes won’t affect you whatsoever, there may be bug fixes, improvements, or just complete refactorings that will affect your app in some way. Obviously, the Sencha team does the best they can to mitigate these issues, but they happen nevertheless.

So if you are thinking about taking the plunge of upgrading, ask yourself a few questions first:

  1. Do I NEED to upgrade? Before you upgrade, view the release notes. These will outline all the bug fixes, enhancements, etc. that are included in the new version. If there is a bug fix that you’ve been waiting on in breathless anticipation, you’re probably chomping at the bit to dive in. However, if nothing on the list is relevant to your immediate needs, you may want to wait.
  2. Can I afford to NOT upgrade? This question is the evil brother of #1. While upgrading can cause issues, skipping intermediate upgrades can also cause issues. After all, if you are 3 or 4 releases behind the most recent, the chances are much greater that you’ll encounter a number of issues that you might have not experienced had you upgraded in-time with the releases.
  3. Do I have TIME to upgrade? You should seriously consider this before proceeding with an upgrade. Even if there are no upgrade-specific errors that immediately present themselves, you also have to think about the downstream affects of an upgrade and what you’ll need to test before publishing your upgraded code:
    • Do you have a lot of plugins? You should test them with the new version to make sure they’re not broken
    • Do you have a lot of overrides for bugs/enhancements/etc? You’ll definitely want to test to see if (hopefully) the new version allows you to get rid of them, or whether you’ll need to refactor your override to jive with the recent changes. After all, while overrides are a great way to extend the framework, the framework obviously doesn’t know about the hacking you’ve done…so these have probably the highest probability for breaking

Ultimately, don’t expect to hit a magic “upgrade” button, rebuild your code, and deploy. Testing the effects of the upgrade will take time and effort.

So if you are upgrading, be smart about it and make sure that you have the time and resources necessary to do your due diligence.

Let’s Upgrade

For us, however, we’re just getting started building an app. Given that we only have a single controller and a few views, it’s highly unlikely that this upgrade will impact us whatsoever. So let’s take a few minutes to upgrade before we continue building our app.

Step 1: Upgrade Sencha Cmd

We were previously using Sencha Cmd 3.1.1.274. To accompany the release of ExtJS 4.2.1, a new version of Sencha Cmd (3.1.2.342) has also been released. To upgrade:

  • Open Terminal, and type sencha upgrade
  • Follow the on-screen instructions
  • Close Terminal, and reopen
  • Type sencha
  • You should see Sencha Cmd v3.1.2.342
  • Done!

Step 2: Get ExtJS 4.2.1

To upgrade our existing app to 4.2.1, do the following:

  • Get the newest version of ExtJS (4.2.1)
  • Save the SDK to the same location where we saved 4.2.0 (mine is ~me/sencha/extjs/ext-4.2.1)
  • In Terminal, navigate into your CarTracker app folder (mine is /webroot/myapp/includes/javascript/apps/cartracker)
  • Enter the following command: 
    sencha app upgrade ~me/sencha/extjs/ext-4.2.1

    (The last bit is the path to the new 4.2.1 SDK that we just downloaded)

  • Finally, just to be on the safe side, run the following command: 
     sencha app refresh

    This will refresh our bootstrap.js file with the correct paths and files for the new version

Step 3: Upgrade Your Documentation Bookmark

You DID bookmark the docs, right? Whether you did or not, be sure to bookmark the newest version of the documentation that is available.

Step 4: Enjoy Ext JS 4.2.1

That’s it! Now if we go back to our browser, we should be able to simply refresh and see precisely the same app in the same state that we left it last.

Hooray!