ExtJS Focus: November 2011

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.

Tuesday, November 15, 2011

Setting up ExtJS 4.0 on IIS 7

I downloaded ExtJS 4.0 (Commercial evaluation version) from http://www.sencha.com/products/extjs/download?page=a

1. Copied to c:\inetpub\wwwroot\ExtJS folder.
(Note: while extracting the zipped files, it would create a ExtJS\ext-js-4.0.7 folder, but i deleted the ext-js-4.0.7 folder after moving all its contents to its parent folder ExtJS. This is just for convenience)

2. Browsed to http://localhost/ExtJS and saw index.html getting rendered without issues. Woo hoo!

While trying to run a sample from (IntroToExt2) from http://www.sencha.com/learn/ext-js-essentials, I got the following error:
Invalid Character
ext-base.js
Line: 1
Code: 0
Char: 1

Not sure exactly why this error occurred. Googling for answers, I found this link: http://www.rahulsingla.com/blog/2011/04/extjs-4-running-docs-over-iis-in-windows. Following the instructions there, I added .json MIME type to IIS and that solved the issue!