Ext JS - Learning Center

Community Learning Center

Personal tools

Views

Manual:Resources

From Learn About the Ext JavaScript Library

Jump to: navigation, search

General JavaScript

URLs

Core JavaScript 1.5 Reference Manual, at Mozilla Developer Center.

Douglas Crockford's JavaScript
A compendium of many different JavaScript books, websites and other references

YUI Theater, at Yahoo! Developer Network
Contains many informative video presentations by JS experts. Douglas Crockford's "Theory of the DOM" and "Advanced JavaScript" video lectures in particular should be required viewing.

QuirksMode, by Peter-Paul Koch.
Excellent learning resources.

A "kitchen sink" collection of JavaScript — regex, debugging, strings, objects, cookies, forms, etc.
http://home.cogeco.ca/~ve3ll/jstutor0.htm

Dead Trees

JavaScript: The Definitive Guide by David Flanagan
This is not a tutorial, but is well suited as a comprehensive reference or as a learning tool for more advanced JavaScript developers.

Pro JavaScript Techniques by John Resig
This book is written by the lead developer of jQuery and obviously has a little bit of a slant towards that library. It has some good material on objects, DOM, and CSS navigation.

Ajax and REST Recipes by Christian Gross
This book has a lot more information about JavaScript than the title may suggest. The second chapter, "JavaScript Recipes," is about ninety pages and includes several recipes for designing JavaScript programs.

ppk on JavaScript by Peter-Paul Koch

Professional JavaScript for Web Developers by Nicholas C. Zakas

Ajax Patterns and Best Practices by Christian Gross

Dynamic HTML by Danny Goodman
Good companion book for JavaScript web development.

Head First Design Patterns by Freeman & Freeman
Not a JavaScript book, but if you find yourself reading the Ext library source, you will be able to relate the design patterns in this book to how the ExtJS library was implemented.

The above includes selections, quotes, and paraphrases from the Ext forum.

OO JavaScript

How to achieve private, public, and privileged members in JavaScript, by Dustin Diaz. Good introductory explanation of method scoping

OOP in JS, Part 1 : Public/Private Variables and Methods, by Gavin Kistner. Another overview of method scoping and prototyping (with sample code)

A JavaScript Module Pattern, by Eric Miraglia in YUI Blog. Presents the pattern knowns as “module pattern” (according to Douglas Crockford).

Again with the Module Pattern - reveal something to the world, by Christian Heilmann. Discusses variants of the module pattern.

JavaScript for Object-Oriented Programmers (Appendix B of the book AJAX in Action). The author presents "a few core concepts that will help Java and C# programmers make the leap to JavaScript programming in a relatively painless way."

CSS Resources

DOM

QuirksMode.org, Peter-Paul Koch's website.
Lots of info regarding browser differences. Make sure you check out the W3C DOM browser compatibility tables.

DOM Core Javascript bindings, from W3C's Document Object Model (DOM) Level 2 Core Specification. The JavaScript object model that most modern browsers implement. This is general DOM objects, not HTML-specific.

HTML Javascript bindings, from W3C's Document Object Model (DOM) Level 2 HTML Specification. The JavaScript object model which covers all standard HTML elements.

Platform-Specific Resources

Ext can run against any server-side framework. Here are some popular server libraries and components that people use with Ext on different platforms to handle back end chores.

PHP

Work is currently being done to develop classes for the Qcodo Development Framework, an open-source PHP 5 framework focused on easing development through code generation (including DAO classes) and a templated architecture for forms processing and rendering. The Ext Grid and TreePanel components will be among the first supported.

Java

Direct Web Remoting (DWR) offers server-side integration for Java projects
http://getahead.org/dwr

.NET

AjaxPro offers excellent server-side Ajax integration to .NET classes

Jayrock is another lightweight JSON / JSON-RPC library for .NET

The Json.NET library makes working with JSON formatted data in .NET simple. Quickly read and write JSON using the JsonReader and JsonWriter or serialize your .NET objects with a single method call using the JsonSerializer.

Python

simplejson simplejson is a simple, fast, extensible JSON encoder/decoder for Python. simplejson is compatible with Python 2.3 and later with no external dependencies

python-json Python JSON Implementation.

demjson This is a comprehensive python binding to the JSON language-independent data encoding standard.

python-cjson This module implements a very fast JSON encoder/decoder for Python. The library is writen in c and likely to be one of the fastest json implementations around. (not just for python, but java and c# as well)

Choosing a Python JSON Translator a benchmark and comparison blog post of different Python JSON Parsers.

There are far to many XML tools and frameworks to list here. You can look them up at the cheeseshop

Django

Most Python web stacks have support built-in for Web frameworks like Ext, or if not, require very little work to use them.

Django's serializer framework can be used to serialize and deserialize JSON and/or XML data. It can use any type of data, from native types (arrays, tuples, dictionaries/hashmaps) to ORM-mapped database objects or resultsets. One can also drop in and use any other python-based json or xml serializing modules (see above).

Ext+Django Forms Dynamically-created client-side forms with validation based on server-side form definitions.

Django JSON Reader Shortcut for JSONReader and Django, automatically picks up Django's primary key field and mappings.

Ruby on Rails

Has built-in support for Ext by JSON and XML

Ext plugin - A plugin to use Ext JS library easily on Rails.

ColdFusion

CFJSON is used to serialize and deserialize JSON data to/from native ColdFusion objects. (See forum post for an addendum to CFJSON for Ext)

ColdFusion 8 provides native support for JSON. ColdFusion component methods can specify JSON as the returntype, there is also a secureJSON attribute. There are new serializeJSON, deserializeJSON, and IsJSON functions.

Coldfire "ColdFire is an extension to FireBug. It provides debug information in a FireBug tab as opposed to the bottom of the page. This lets you debug and keep your site layout intact, since ColdFusion's built-in debug information can sometimes mess with your site layout.".

See also Manual:Resources:ColdFusion which is the Ext & ColdFusion wiki page.

IBM Lotus Notes/Domino

IBM's Lotus Notes/Domino collaboration software can be extended to the web using Ext to provide a highly flexible application layout.

Ext.nd - is aimed to ease the integration of Notes/Domino and Ext. There is a separate forum to discuss development and issues as well as download the latest version.

Delphi/FreePascal

ExtPascal is an Ext JS wrapper for Object Pascal. ExtPascal lets you use the Ext JS from Object Pascal commands issued by the server. That brings the structure and strict syntax of the Object Pascal for programming the web browser.

IDEs

Some forum threads that discuss this topic:

Eclipse Based IDEs

Eclipse is an open-source IDE (among other things!). To use Eclipse for Ext development (and Javascript development in general), you install a plugin that provides Javascript language capabilities (code assist, syntax checking, etc..). Some great plugins are:

Aptana - Adds JavaScript, HTML, CSS, PHP languages, FTP/SFTP support, JavaScript debugger and lots of other RIA/Web2.0 goodies
Spket - Adds JavaScript, XUL, SVG, Laszlo, Silverlight, etc..
JSEclipse - Adds JavaScript

As listed above, each of these plugins provide their own Javascript editor (among other things). When installing any of these plugins from their respective websites, you can choose to download a complete stand-alone version of Eclipse with the plugin pre-added, or add the plugin yourself to an existing installation of Eclipse (either via manual download or through Eclipse's built-in plugin manager --> similar to Firefox's add-ins mechanism). Using the second method you can freely install all of the plugins simultaneously into a single Eclipse installtion. The Javascript editor that will be used when you open a .js file inside Eclipse will depend on which Javascript editor is set as the default for the .js file extension in Eclipse > Properties > General > Editors > File Associations. You can also right-click on a file in Eclipse and choose Open With to use the Javascript editor of your choosing.

The plugin that you decide to use will most likely depend on how well it supports code assist for the version of Ext that you are using.

One appealing configuration is to use Aptana as your default IDE for everything RIA/Web2.0 (as it has the widest range of RIA-related features such as HTML, CSS etc..) but use Spket for JavaScript. Spket has aruguably the best code assist for Ext, and is the easiest to update to reflect the latest version of Ext. Spket also has a built-in Javascript formatter, and the Spket author is active on the Ext forums making sure that it stays compatible with the latest release of Ext.

Aptana + Spket + ExtJS

Download and install Aptana Studio (includes Eclipse).
Start Aptana and navigate the application menu to: Help → Software Updates → Find and Install... → Search for new features to install → New remote site...
Name: "Spket", Url: "http://www.spket.com/update/"
Restart Aptana
Watch this Spket IDE Tutorial to see how to easily add Ext code assist (you can point it at the latest /src/ext.jsb to keep code assist up to date with the latest Ext version). The steps are basically:
- Window → Preferences → Spket → JavaScript Profiles → New
- Enter "ExtJS" and click OK
- Select "ExtJS" and click "Add Library", then choose "ExtJS" from the dropdown
- Select "ExtJS" and click "Add File", then choose the "ext.jsb" file in your "./ext-2.x/source" directory
- Set the new ExtJS profile as the default by selecting it an clicking the "Default" button on the right-hand side of the "JavaScript Profiles" dialog.
- Restart Aptana
- Create a new JS file and type: Ext. and you should get the Ext Code completion options.

Spket IDe

AptanaIDE

Aptana is an Eclipse-based JavaScript IDE with powerful features with integrated Ext support. There's also an impressive list of instruction videos for a quick tour. And it has Adobe Air support.
As of February 2008, Aptana is still being shipped with Code Assist for Ext 1.x only. You can download an updated Ext 2.x plugin here.

Komodo Edit with ExtJS API catalog (Code Intelligence)

Award-winning editing for dynamic languages including Perl, PHP, Python, Ruby and Tcl; plus support for browser-side code including JavaScript, CSS, HTML and XML. Background syntax checking and syntax coloring catch errors immediately, while autocomplete and calltips guide you as you write. Available on Windows, Mac OS X and Linux.

To install the API Catalog:
1. Go under the Edit menu.
2. Select Preferences
3. Select Code Intelligence
4. Look for the "Add an API catalog" button below the "API Catalog" section.
5. Browse to the directory containing the ExtJS CIX file
6. Enjoy ExtJS Code Intelligence!

this works under Windows XP And Ubuntu Linux.

IntelliJ IDEA

IntelliJ IDEA features excellent JavaScript editor for productive JavaScript programming. All of its features including code completion, error highlighting and refactoring, quick fixes and intention actions are JavaScript aware and let you productively create efficient JavaScript code.

Homepage

TextMate with ExtJS Bundle

TextMate is a versatile plain text editor with a unique and innovative feature set. A bundle is a collection of macros, commands, snippets, drag commands, templates, preferences, and language grammars.

To install the ExtJS Bundle:
1. Download and extract ExtJS Bundle
2. Copy "extjs.tmbundle" folder to bundles folder "/Library/Application Support/TextMate"
3. Launch TextMate
4. Switch the language to JavaScript (ExtJS) by clicking the language pop-up selector in the status bar.

Various debugging tools

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug

Screencasts

Tutorials

Javascript debugging with Firebug

Using Firebug's console with other browsers

Firebug Lite

HTTP Trafic Viewer

Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

Fiddler

MS Script Editor

MS Script Editor

IE Web Developper

IE WebDeveloper is an add-on for Microsoft Internet Explorer. The rich web debugging toolset allows you to inspect and edit the live HTML DOM and current cascaded styles, evaluate expressions and display error messages, log messages, explore source code of webpage and monitor DHTML Event and HTTP Traffic.

IE Web Developper

Testing Data Generator

This little program lets you generate large volumes of random, custom data for use in testing software, formats are sql, csv, xml, excel and html.

http://www.generatedata.com/#about

YSlow

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:

Performance report card
HTTP/HTML summary
List of components in the page
Tools including JSLint

http://developer.yahoo.com/yslow/

DebugBar - IE plugin

DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
And many more features: See page cookies, get pixel color on a page, make a page screenshot...

http://www.debugbar.com/?langage=en

Retrieved from "http://extjs.com/learn/Manual:Resources"