How to Learn ExtJS

Ever since CodeSmith Insight was featured on the Sencha Product Spotlight I have been getting a lot of questions about ExtJS. Specifically how to start learning it, and what tools we recommend using. Well rather than respond to these inquiries one email at a time, I thought it might be a good idea to throw up a blog post about how to learn ExtJS.

I hope this helps you get started, but always feel free to contact me with any additional questions you have.

Start with the Samples

I think the best way to start learning ExtJS is to reverse engineer some of the official ExtJS samples. I like learning by example, so I found that to be a great starting point. After I had a grasp of the fundamentals (their object orientation, their standard configuration properties, etc), I was able to start authoring my own components. I suggest starting with the window examples, taking a look at the form examples, and then really getting a feel for the full application layouts by exploring the feed viewer.

Also, the most important and best thing that you can do: keep the ExtJS API open in another window at all times!

Try using the ExtJS Designer

The Ext Designer is a visual designer for creating ExtJS components. I did not have access to this back when I started working with ExtJS, but in retrospect, I wish that I had. Recently I had the opportunity to help another company get started with ExtJS where they used the designer, and I can endorse that it's a great tool. It allows you to visually drag drop and resize components, such as elements on windows and panels, and helps you get an image of what you are creating without having to render your classes in the browser every step of the way.

The designer is great for two reasons: 1) you can see what you are doing, which makes it much easier to learn what ExtJS configuration properties do, and 2) you don't have to worry about one bad value or syntax error crashing your whole page every time you are trying to learn a new ExtJS component.

Debugging Tools

Firebug for Firefox is still (in my opinion) the best debugging tool around. It is all around responsive, it includes the JSON viewer, it's JavaScript console has auto complete, and you can edit DOM elements inline with ease.

The Google Chrome Development Tools (not Firebug Lite, but the actual built in tools themselves) have really grown into a usable set of tools since they were released two years ago. It finally competes with Firebug for responsiveness and available features. While it does not have the JSON viewer, it does offer a very useful and unique local storage viewer.