ExtJS Resources

Reprint from ExtJS

Contents

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

Learning ExtJS by Shea Frederick, Colin Ramsay & Steve ‘cutter’ Blades
By using a series of straightforward examples, Learning Ext JS will help you create web applications that look good and perform beyond the expectations of your users.

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

  • A JavaScript Module Pattern, by Eric Miraglia in YUI Blog. Presents the pattern knowns as “module pattern” (according to Douglas Crockford).
  • 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.

Related Topics

Yahoo! User Interface Library (YUI)

Ext JS was born as yui-ext, a set of extensions to the YUI Library. You can learn more about YUI with these resources:

JSON

Overview of the JSON data format commonly used with JavaScript

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.

Perl

Has several distributions for developing Ext apps, with plenty of JSON and XML support.

Catalyst MVC Framework binds together countless plugins and the shear power of perl modules to render Ext from html and javascript templating. Plus ORM data modeling, JSON and XML de/serialization, authentication, authorization, session and cache handling and much, much more.

ListFrameworkBuilder is a flexible Catalyst extension that automagically builds a ExtJS CRUD site from your DB. Just feed your DB connection string and let ListFrameworkBuilder do the work.

FormFu can render dynamic Ext forms using straightforward configuration files. Supports ExtJS Grids too.

The JSON:: Namespace with many modules to natively translate JSON from/to Perl data structures.

Jemplate creates server generated Javascript with TT templates.

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

Image:KomodoEditUnderUbuntu_intellisense.png

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.

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

There is additional discussion about debugging here.

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.

Screencasts

Tutorials

Using Firebug’s console with other browsers

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.

MS Script Editor

IE Web Developer

IE Web Developer 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.

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.

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

Testing

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

Selenium automated web app testing

Sahi – Web Automation and Test Tool

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s