From Learn About the Ext JavaScript Library

Contents 1 Introduction 2 What Source Code? 3 The Ext Source Distribution 4 Where Do I Start? 5 Adapters 6 Core 7 Where To Next

Introduction

The novice Ext user has an impressive array of learning resources at their disposal: the API documentation, this wiki, an ever-growing collection of Tutorials, the discussion forums, the irc channel.. (see the Learn section of the Ext website for details on all of these). But arguably the single greatest resource available is the Ext source code itself.

Studying the freely available source code (Ext is an open source project after all) will not just help you to grok Ext, it will also expose you to a wealth of advanced Javascript techniques and best practices that can help you improve your own coding techniques.

What Source Code?

Javascript is an interpreted language, meaning that code is not compiled before being run. That means that in theory the Ext code that is delivered on your website is human-readable. I say "in theory" because in reality the original source code is run through some automated steps to concatenate it into a small number of files and reduce filesize by stripping unnecessary whitespace & comments and renaming variables.

If you look at the source of one of the standard Ext core include files: ext-core.js, you will see a handful of very long lines of source code. This file is the result of the automation process mentioned above -- great for browsers, not so great for humans trying to understand how the code works.

ext-core.js

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper=function(){var _1=null;var _2=/^(?:br|frame...
 
Ext.Template=function(_1){if(_1 instanceof Array){_1...
...

If you have a look, instead, at ext-core-debug.js (notice the -debug at the end of the filename), you will see nicely formatted source code. This file is intended for use with a debugger such as Firebug which allows you to step through code line-by-line. You will notice that this file weighs in at approximately double the size as a result of the extra whitespace and longer variable names!

ext-core-debug.js

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper = function(){
    var tempTableEl = null;
    var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
    var tableRe = /^table|tbody|tr|td$/i;
...

The debug versions of Ext include files are great for examining what the Ext library is doing during debugging, but you'll notice that we're still missing something very valuable... code comments! To get these you need to look at the original source code. To find out how, read on!

The Ext Source Distribution

The compressed archive you get when download Ext contains, among other things, a subfolder called source. Inside that folder is, you guessed it, the entire Ext source, dual-licensed under the Ext Commercial License and the Open Source LGPL 3.0 license (full license info here). Aren't the Ext developers nice!

Open up any of the source files contained with your favourite text editor (preferably an editor that provides code highlighting, or better yet a full-featured IDE) and start exploring!

Where Do I Start?

The Ext codebase contains a lot of different files, and getting started can be quite daunting. Luckily, Ext is a very well designed Javascript library -- low-level code takes care of nitty-gritty details such as cross-browser dom manipulation, allowing higher level classes to work at higher levels of abstraction (the term class here is not the same as what you might be used to in languages such as Java and C++, but concepts such as inheritance are still possible so the analogy is a good one -- for more info on object-oriented Javascript, see the Introduction to object-oriented (OO) JavaScript).

What this means is that you can explore the source code in either a bottom-up or top-down manner. Those of you familiar with the API have been working at the highest level of abstraction, and from there you can follow your nose down into the lower levels according to your interests. But if you're like me and you want to know what's really going on, the best place to start is the bottom.

Adapters

The first source file that your browser sees, and the one that has the job of creating the Ext object itself, is Ext.js

Ext.js

Ext = {};

Ext started its life as an extension to the Yahoo UI javascript library. At that time, Ext relied on yui for all of its low-level cross-browser code. Now that ExtJs is a standalone Javascript library, however, you have the choice of substituting YUI for other javascript libraries such as prototype, or jQuery. The source files that map the low-level Ext API around another javascript library (or Ext's own base library) are known as adapters and they live in the source/adapter subdirectory. When you include Ext in your website you choose which adapter you want to use.

Core

The files in the source/core directory are the lowest-level source files that build on top of the adapter API. Some of these files are so low-level that they are essentially stand-alone libraries in their own right. This means that they can be studied and understood in their entirety without knowing anything about the rest of the Ext library. To understand how Ext does its magic at the most fundamental level, you really want to get to grips with each of the source files in the source/core directory.

Where To Next

If you're new to Javascript the first thing that'll cause you to scratch your head is the use of the Module Pattern (necessary because Javascript has function-scope, not block-scope as you might be used to from other languages). The Module Pattern is discussed in more detail, with links to more resources here.

Next you probably want to learn how Ext's Class Design and Inheritance mechanisms work.

A good resource to keep an eye on as you're exploring the code-base is the ext.jsb file which lists dependencies between source files. This file is used by the Ext JS Builder and is quite invaluable when trying to work out where to start when exploring a new class hierarchy.

Once you get that far you'll probably be creating your own User Extensions and hacking it with the best of em. Good luck and see you in the forums and/or on #extjs

--Patrick