ExtJS Focus: How-To

Friday, November 18, 2011

A What-to-read-first Guide for newbies

I am a newbie myself and I have been having a hard time trying to find the right articles that would introduce me to ExtJS.

So, here are the articles and the order in which they must be read that I think would help the newbies learn ExtJS in a gradual, incremental way.

BTW, this list is always "under construction" and will be changed as I find new articles and as my own understanding changes.

SETTING UP YOUR MACHINE

1. Getting Started
http://www.sencha.com/learn/getting-started-with-ext-js-4
(While you are at it, check out how to set up for IIS here)

2. ExtJS Designer is a great tool for development. Not only does it accelerate development, but it is also a great way to explore ExtJS! So, install this designer first.

LEARNING ABOUT ExtJS

1. ExtJS Essentials
(Very basic but it serves as good intro to concepts and a feel for ExtJS-based development)
http://www.sencha.com/learn/ext-js-essentials

2. Ext Designer for ExtJS 4.0
http://cdn.sencha.io/ext-designer/ext-designer-for-ext-js-4-users-guide.pdf

This is a very well-written guide. It has a lot of introductory material that you'd feel grateful for as well as tutorial-like steps that you can take and learn how to use ExtJS. (For following along with the guide, use the data from this link http://www.sencha.com/forum/showthread.php?112879-cars.json and save it as cars.json)

3. Architecting your app in ExtJS 4.x - part 1
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/

4. Architecting your app in ExtJS 4.x - part 2
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2

5. The Data Package -- This article introduces Model, Proxy and Store
http://www.sencha.com/learn/the-data-package/

ExtJS Samples

Check out these samples -- working demos with source code. This is a great way to learn!
Samples & Demos | Ext JS 4 | Products | Sencha

Wednesday, November 16, 2011

Getting Started w/ ExtJS 4

1. Create the HTML file

There is possibly only one HTML file per application. This is a deviation from how we design apps in ASP.NET.

In ExtJS, we just have one HTML file and we load and unload different views on the same page.

It is easy to do this using Ext designer. (Download here)

2. Include ext-all-debug.js in your HTML

There are two core Javascript libraries that you must include in your HTML file in order to program using ExtJS. They are: Ext and DomQuery. Both these libraries are part of ext-all-debug.js file (I have commercial evaluation version)

Including this file is your first step.

<html>
<head>
<script type="text/javascript" src="../ext-all-debug.js"></script>
</head>

Note:

ext-all-debug.js is the non-minified version of ext-all.js which would be shipped along with production code. ext-all-debug.js eases development as it facilitates debugging through the code and making sense of what is happening.

If you are using Ext designer, this is done automatically for you.