sencha-logoOver 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 regard.

The app we’re building is very straightforward. Imagine you work for a car dealership. As part of the management of this business, it’s likely that you’ll need to track various data related to business…inventory of cars, staff, sales, etc. While such a system in real life would be fairly complex, we’ll be breaking off simple chunks of these areas of concern to make our app manageable for the format of the walkthrough. Obviously this won’t be a fully realized management/admin app; however, it will encompass many of the common aspects of such a system…with ExtJS 4 flair baked in.

Miscellany Before We Begin

  1. Just to be clear, I am not, and am certainly not claiming to be an expert, nor do I propose that my strategies embody “best practices” (I like to think they do, but there may be others who disagree). I’m simply sharing strategies and practices that have helped me be very productive with ExtJS 4. If you disagree with any of the strategies I employ, please constructively address the shortcomings in the comments…I will gladly take polite remonstrances with grace. Flaming, however, will get you nowhere.
  2. ExtJS is a client-side framework, but of course integrates quite nicely with server-side technologies of all kinds. For this project, I’m using ColdFusion 9 and MySQL, and will be specifically leveraging the ColdBox framework (the app I’m developing is going to be used in another project, hence the choice). If you don’t use/like this stack, you can use whatever you like. This series will purposefully avoid anything that is specific to the server-side tech involved, but I include it here for reference if you are interested. If you do have questions about what is specifically happening in the server-side code, leave a comment and I’ll do my best to answer.
  3. The Data Model for this app will morph as we go along. There are a few reasons for this.
    • First, I’m WAY to lazy to build this entire app from scratch, and then go back through and break it into chunks. We’ll make it up as we go along and live with it.
    • Second, and most importantly, developing the data model partially “on-the-fly” is more true to real life in my opinion. As much as many of us would like to think that we nail the data model the first time through, it’s a pack of lies. As bad assumptions are uncovered and business requirements grow (read “change”), data models evolve. Part of the art of development is coping with these changes and still delivering. That’s the goal in this project, too.
  4. GitHub! For each installment of this series, I’ll be posting a snapshot of the client-side codebase to this project’s repo.

Conclusion

Ok, that’s about it. I’m excited to begin, and I hope this is helpful to someone. The first installment is coming soon 🙂