Reprint from ExtJS
YUI Theater, at Yahoo! Developer Network
QuirksMode, by Peter-Paul Koch.
Excellent learning resources.
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.
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
Ajax Patterns and Best Practices by Christian Gross
Dynamic HTML by Danny Goodman
Head First Design Patterns by Freeman & Freeman
The above includes selections, quotes, and paraphrases from the Ext forum.
- OOP in JS, Part 1 : Public/Private Variables and Methods, by Gavin Kistner. Another overview of method scoping and prototyping (with sample code)
- Again with the Module Pattern – reveal something to the world, by Christian Heilmann. Discusses variants of the module pattern.
- CSS 2.1 specifications
- CSS contents and browser compatibility
- Position is Everything (PIE)
- CSS-Discuss mailing list archive
- css-discuss Wiki
- CSS Examples
- 53 CSS-Techniques You Couldn’t Live Without
- CSS Tutorials
- Layout Grid Bookmarklet
QuirksMode.org, Peter-Paul Koch’s website.
Lots of info regarding browser differences. Make sure you check out the W3C DOM browser compatibility tables.
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:
- YUI Library (Download, tutorials, examples, docs, etc.)
- YUI Blog
- The official JSON website. Translated to several languages.
- JSON for the masses, by Dustin Diaz.
- Mastering JSON, by Patrick Hunlock
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.
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.
Direct Web Remoting (DWR) offers server-side integration for Java projects
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.
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
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.
Has several distributions for developing Ext apps, with plenty of JSON and XML support.
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.
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
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.
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.
Some forum threads that discuss this topic:
- Which IDE do you use for coding ExtJS ?
- Coding Tools other than Dreamweaver… what do you use?
Eclipse Based IDEs
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.
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:
- 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
- Restart Aptana
- Create a new JS file and type: Ext. and you should get the Ext Code completion options.
- 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)
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.
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
Various debugging tools
There is additional discussion about debugging here.
- Debugging JS with Firebug
- Hewitt’s screencast
- Video Tutorials on how to use the Firebug Extension
- Firebug 1.0 Beta Screencast
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
- 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…
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