Archive for May, 2013

ExtJS 4.2 Diversion: Custom Panel UIs…Part Deux

Theming in ExtJS 4.2+ is a beautiful, tricky, complicated mistress. On the one hand, it has been completely reworked (for the better…mostly) to be a lot more extensible, take advantage of theme inheritance, care less about how themes are created (and where), and a host of other really nice features.

However, the elegance of the new theming engine comes with a price…namely, a steep learning curve (I should know, I’m still having trouble ascending this hill). Prior to 4.2, casual theming was really easy. You could open a single file, edit a few SASS variables, run the compiler, and you were done. Now, however, the logic and structure of themes is much more distributed, make for a lot more complexity than most people who dabbled in the previous version are probably prepared for.

And of course, there is the brand-newness of it. The documentation, while helpful in getting setup, is particularly thin on the point of actually theming. Most other tutorials, books, etc. follow the documentation in this regard, making really good examples of theming very hard to come by (unless, of course, you only want to change the color of the app from blue to green…if so, you’re covered :)).

This, ultimately, More >

ExtJS 4.2 Diversion: Custom Panel UIs

I’ll be writing about this later on, but wanted to share some screenshots. I was playing around with the new Theming approach in ExtJS 4.2 tonight, and was trying to get some Twitter Bootstrap-inspired panel UIs going. Here are my initial results with a bit of theme-hackery:

The best part about these is that there was very little actual theming that needed to be done. I think the outcome is pretty sleek…I like the drop-shadow on the panels, the typography, and the more generous font-sizes and white space.

Anyway, just a tease, I suppose. I’ll put up some code later this week.



Share this:

ExtJS 4.2 Walkthrough — Part 4: Steppin’ in Some CRUD

We’ve finally arrived! After some setup, a bit of layout work, the creation of our first controller, a full version upgrade and even a bug fix, we’re ready to get into the heart of our application…specifically, interacting with data from our server. In order to do this, we’ll need to explore the concepts of Models, Stores and Proxies, as well as creating a new controller and even a fancy data grid with inline editing capability.

We’re in for a long haul in this installment, but it’s worth it. When we come out the other side, we’ll not only have real functionality working in our app, but we’ll also have covered some very important concepts that will let us ramp up our development of the rest of the application. Ready? Let’s do it.

 NOTE: The code for this session can be found on GitHub

Data Models

As a developer, you’ve no doubt utilized data models on a regular basis. They are handy things, for not only do they let you describe objects via their properties and relationships, but they also semantically describe your application. In ExtJS, the fills this role, providing a really nice way to manage objects which can be grouped together in caches (a Store) and, More >

ExtJS 4.2 Walkthrough — Post-Upgrade Bug

In the last installment, we took a few moments to upgrade our app from ExtJS 4.2.0 to ExtJS 4.2.1. As I pointed out, upgrading is not an insignificant decision, as you will have to test and verify that your app continues to work as expected.

Well, in preparing the next several sections, I came across a bug in 4.2.1 that harms a bit of the functionality I was wanting to implement. While these bugs are a natural (albeit frustrating) part of software evolution, ExtJS is fortunately extensible enough that we can easily create a custom patch (or override) that will allow our code to work as expected WITHOUT modifying the core framework. The benefit of this approach, of course, is that we future-proof our code against new versions. So then, when the new version comes out, we can remove our custom patch and see if the issue is resolved in the core. If it’s not, we can simply re-enable our patch, submit another bug ticket :), and continue on.

Tips for Dealing with Bugs

Before we fix this bug, let me offer a couple suggestions to mentally dealing with bugs in ExtJS:

  • Acceptance: The first step to healthily dealing with bugs in ExtJS is to More >

ExtJS 4.2 Walkthrough – Upgrade!

As 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 More >

ExtJS 4.2 Walkthrough – Documentation

This is a bit of an aside, but tonight I worked on migrating my current progress on this walkthrough app into JSDuck-style documentation. It turned out awesome!

Check out the documentation site here:

I’ll be updating this with each installment, and one of these days I’ll add a walkthrough for how to create this (even though it’s dead simple).

Anyway, super stoked about how awesome they turned out, so I thought I’d share 🙂

Share this:

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 >