Ext: getting started with ext

Getting started

New ext users can obtain learning resources through the following channels: API documentation, Wikipedia, increasingly rich tutorials, forums, IRC channels, and so on (see learn ), these aspects are available on the ext official website. But the most important available resource is the ext Source Code itself. You can easily learn the source code in this way (the ext project is open-source after all). It not only helps you to experience Ext, but also gives you access to a lot of advanced JavaScript skills and best practices, further improve the encoding level.

Reveal source code

Javascript is an interpreted language, meaning that the Code is not compiled before running. According to this theory, the ext Code published on your website is human-readible ). I would like to say "Theoretically" here because in actual situations, many source codes are processed by some automated steps, and a few lines of files are generated and finally released. by removing the blank symbols and comments, or obfuscation to reduce the file size.

Take a closer look at ext standard source codeExt-core.js, You will find that this is a very long source code. This is the result of the automated step just mentioned-it is good for browsers! But it is hard for us to read.

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...
...

Next, we can see thatExt-core-debug.js(Note that the file name is followed-Debug. This file is used together with the timer. tools like firebug allow you to debug code step by step and line by line. You will also find that the file size is nearly doubled, which is due to no compression or confusion.

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;
...

This debugging version can easily check which step the ext library runs in the debugging phase, but you will still miss a valuable... code comment! To fully view the code, read the real original code!

Details of ext source code release

The compressed file you get in download contains one of the following folders:Source. In this folder, as expected, all ext source files comply with the lesser GNU (lgpl) Open-source protocol. It should be very suitable for ext developers.

Use your daily text editor to open any file in the source code (a highlighted editor is recommended, or you can see full-featured ide here) to start our adventure!

Where should I start?

The ext code library contains many types of files, which are even daunting. Fortunately, ext is a javascript library designed after full consideration. The code at the underlying layer provides a robust foundation for various applications, such as cross-browser Dom control, this makes the class classes on the upper layer run on a more advanced abstraction layer (class 1 terminology is slightly different from the Java and C ++ languages we are used, however, some concepts such as inheritance can be understood so far-for more information about object-oriented JavaScript, see Introduction to object-oriented (OO) JavaScript ).

This means that when you browse the source code, it doesn't matter whether you use the "bottom-up" or "top-down" method. The code in the APIS you are familiar with already belongs to the highest abstract level. You can follow these familiar APIs based on your interests. However, if you agree with me and intend to gain a deeper understanding of its principles, the ideal thing is to start with the underlying code.

Adapter adapters

The browser reads the first source file. One task in the file is to create the ext object itself.Ext. js

Ext = {};

EXT is an extension of the Javascript library formed in yahooui. At that time, ext had to rely on Yui's underlying code to handle cross-browser issues. Now extjs is an independent and dependency-Free Library (standalone). You can replace Yui with another JavaScript library, such as prototype, jquery, or the best choice among them, -ext comes with the underlying library. This part of code maps these libraries (including the underlying libraries of ext) to the underlying libraries of Ext, which we call adapters ). This part of the source code is located inSource/adapter. When the project introduces Ext, You need to select the adapter you want to use.

Core

Source/CoreThe file in is the "relative" underlying source code built on the adapter API. Some source code is even "underlying" directly used for the code of the independent library. This means that you should first understand and learn the entire database, and then learn the remaining parts. To understand ext's various "magic" and core layers, we should focus on the various source code under the source/Core directory.