The success of the framework can be contributed to one huge factor, documentation, documentation – one more time – documentation!  OK, that out of the way, the Ext 2.x documentation is arguably the best in the market for any API. In my honest opinion, it beats the crap out of the API docs from many huge companies, which include Adobe and Microsoft.  Since 2.x rolled out in leary 2007, many developers have been drooling over the Ext documentation engine and many, including myself, wished we could have it for our own.  Now we can!  With ext-doc, a free, opensource documentation generater, we can create beautiful API documenation for our own APIs.  I just joined the project and am hoping to submit some of my UI Extensions such as the tabpanel menu:

Here is the doc page: http://code.google.com/p/ext-doc/  and related Ext JS Forum thread.

To those of you who are currently subscribed to MEAP, I have submitted chapter 05 (Forms and form fields) for review today and will start on working on chapter 06, the datagrid today.   For a preview of some of the code examples, visit: http://tdg-i.com/extjsinaction/chapter05/

Click here to download a 44MB 640×480 M4V (H.264/iPod) video version.

One of the largest issues with the TDGi.iconMgr class was the fact that it used individual icons instead of one large file.  I still argue that a single huge file is too much for a browser to download on the internet.   This argument, however, does not work well for intranet applications, where speed doesn’t matter.  So, I decided to start working on a montage.

I found this task to be extremly simple with the use of the wonderful image automation tool, ImageMagick with some clever shell scripting:

montage -adjoin -tile 1x1462 \

-geometry 16x16+0+0 -quality 90 -background -none `ls *png | sort` ../collage.png

Next was the task to create the JSON required to display the montage.  Again, using simple BASH scripting:

X=0

for i in `ls | grep png | sort`; do

   name=`echo $i | awk -F. '{print $1}'`

   print "{n:'$name',f:'$i',y:$X},"

   X=`echo $X+16 | bc`

done

I edited the file manually to include the JS array tags “[]” and deleted the trailing comma.  Lastly, we needed to create the JavaScript to parse this stuff.  Here are the sprites in gif (IE6) and png (Fx and IE7+) formats!

Once complete, we have our new iconMgr using the new sprite:

test drive (click the button): http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/

Known issues:

Filters can be slow – yes I’m aware and will be looking to see if i can optimize it.

To do:

Enable sprites for iconMgr

I’m very excited to announce the up and coming book “Ext JS in Action” via Manning, which is focused on Ext 3.0.

Being that the manuscript is still in production, you can get early access to the chapters as they are being produced via the Manning Early Access Program.

Here is the TOC (which is subject to change).

Part 1.  A framework apart
1.    A different breed of frameworks.
1.1.    Why Ext JS
1.1.1.    It’s fun and easy to learn
1.1.2.    A rich set of widgets
1.1.3.    Quality through centralized development
1.1.4.    Rich API documentation
1.1.5.    Involved community
1.2.    Main course or side dish
1.3.    Additions for 3.0
1.3.1.    Ext Direct
1.3.2.    ListView and Charts
1.4.    What you need to know
1.5.    Rethinking the web
1.5.1.    Tradtional Web browsing
1.5.2.    The content request cycle
1.5.3.    AJAX to the rescue!
1.5.4.    AJAX Applied to browsing
1.5.5.    XML or JSON
1.6.    Take it for a test drive
1.6.1.    Laying the foundation
1.6.2.    Building our Window
1.6.3.    Using our window
Summary

2.    An Ext JS Primer
2.1.    Starting of
2.1.1.    Fire only when ready!
2.1.2.    Ext JS Pulls the trigger
2.2.    Managing Events with Observable
2.2.1.    Taking a step back
2.2.2.    Events a take glance
2.2.3.    Events in the browser
2.2.4.    DOM Based Events
2.2.5.    Event flow in the DOM
2.2.6.    Bursting the bubble
2.2.7.    Components have events
2.2.8.    Registering Event names
2.2.9.    Registration of event listeners
2.3.    The Ext.Element
2.3.1.    The heart of the framework
2.3.2.    Using Ext.Element for the first time.
2.3.3.    Creating child nodes
2.3.4.    Removing child nodes
2.3.5.    Applying effects
2.4.    The Component Model
2.4.1.    Lazy or direct rendering
2.4.2.    XTypes and Component Manager
2.5.    The Component Lifecycle
2.5.1.    Initialization
2.5.2.    Render
2.5.3.    Destruction
Summary

3.    A place for components
3.1.    Containers
3.1.1.    Learning to tame children
3.1.2.    Querying the container hierarchy
3.1.3.    The Viewport Container
3.2.    The Panel
3.2.1.    Building a complex panel
3.3.    Popping up Windows
3.3.1.    Further Window configuration Exploration
3.3.2.    Advanced MessageBox techniques
3.3.3.    Showing an animated MessageBox
3.4.    Components can live in Tab Panels too
3.4.1.    Remember these two options
3.4.2.    Building our first Tab Panel
3.4.3.    Tab management methods you should know
3.4.4.    Working with caveats and drawbacks

Summary

4.    Organizing Components
4.1.    Layouts at a glance
4.2.    The simple Container layout
4.3.    The anchor layout
4.4.    The form layout
4.5.    The absolute layout
4.6.    Making components Fit
4.7.    The accordion layout
4.8.    The Card layout
4.9.    The column Layout
4.10.    The table layout
4.11.    The border layout
Summary

Part 2.  Ext Components
5.    Building a dynamic form
5.1.    Dynamic forms are a major tool in RIAs
5.1.1.    The basic input fields.
5.1.2.    Client side custom validation with VTypes
5.1.3.    Suggestion based values with the ComboBox
5.1.4.    Radios, Radio Groups and Checkboxes
5.1.5.    Using the File Upload field
5.1.6.    HTML Editor
5.2.    Managing form data
5.2.1.    Submitting your form via AJAX
5.2.2.    Loading values into the form
5.2.2.1.    Setting values with a simple JSON Object
5.2.2.2.    Advance Loading using Ext.Record
5.3.    Customizing your form
5.3.1.    Customize data displayed in the ComboBox using Templates
5.3.2.    Getting creative with advanced form layouts
5.3.2.1.    Using the column layout
5.3.2.2.    Building a Wizard
Summary

6.    The venerable Ext DataGrid
6.1.    Grids as a standard for displaying data
6.2.    Data Grid components dissected and analyzed
6.2.1.    Data Store is a powerful data management tool
6.2.1.1.    It’s all stored in records
6.2.1.2.    Digesting multiple formats with readers
6.2.1.3.    Bending the rules with the ScriptTag Proxy
6.2.2.    Column Model
6.2.2.1.    Custom renderers adds flexibility
6.2.3.    Grid View
6.2.3.1.    Setting custom styles for rows
6.2.4.    Selection Model
6.2.4.1.    Interacting with Rows and Cells
6.2.4.2.    Managing selections via code
6.3.    EditorGrid Panels allow your users to edit data on the fly
6.3.1.    Editors are the magic
6.3.2.    Using Ajax to submit modified records
6.4.    Adding pagination to large datasets.
6.4.1.    Pagination Data Concepts
Summary

7.    Taking root with Ext Trees
7.1.    Great uses for the Tree in applications
7.2.    Sprout a TreePanel
7.2.1.    Tree Loader
7.2.2.    The Tree root and leafs
7.2.3.    Selection Models
7.3.    Building a tree
7.3.1.    Using a predefined JSON object
7.3.2.    Loading via remote data
Summary

8.    Toolbars and Menus
8.1.    Building a toolbar
8.1.1.    Finding a place
8.1.2.    Menus
8.1.3.    Buttons and Split Buttons
8.1.4.    Spacer and Fill
8.2.    Displaying a menu as a context menu
8.2.1.    Capturing mouse coordinates with the right click event
8.2.2.    Anchoring a menu to a component
Summary
9.    Advanced Element Management
9.1.    Creating raw DOM Elements
9.2.    Searching for elements with DomQuery
9.3.    Ext.get – DOM Management on steroids
9.3.1.    Managing CSS
9.3.2.    Put your mask on
9.3.3.    Changing dimensions
9.3.4.    Managing the children
9.3.5.    Aligning and Anchoring
9.4.    Display information with a mouse over
9.4.1.    Applying QuickTips to existing elements
9.4.2.    ToolTips as helper text for Toolbar Items
9.5.    Give your users the ability to resize elements

10.    The Ext Toolbox
10.1.    What are the tools (overview)
10.2.    Detecting browser type
10.3.    Looping with Ext.each
10.4.    Communication with Ext.Ajax
10.4.1.    A convenient wrapper for the browser’s XHR method
10.4.1.1.    Requesting data
10.4.1.2.    Utilizing callback handlers
10.5.    Leverage the flash object for communication
10.6.    History Manager
10.6.1.    State management at a glance
10.6.2.    Saving state
10.6.3.    Retreiving state
10.7.    Graphically displaying data with Ext Charts
10.7.1.    Charts at a glance
10.7.1.1.    Bar
10.7.1.2.    Column
10.7.1.3.    Pie
10.8.    Decoding and encoding JSON
Summary

11.    Drag And Drop
11.1.    Think “data move”
11.2.    Drag and Drop basics
11.2.1.    Start it all with the Drag Event
11.2.2.    Drop Targets are what you’re shooting for.
11.2.3.    Handling Drop Events
11.3.    Adding Drag and Drop to out of the box Ext Components
11.3.1.    Using Drag and drop from one DataGrid to another
11.3.2.    Organize your data with drag and drop from Tree to Tree
11.3.3.    From Tree to DataGrid and back
Summary

Part 3. Building a Configurable Composite Component
12.    Developing Object Oriented Code with Ext
12.1.    Another level of Object Oriented JavaScript
12.2.    Extending and overriding with Ext.extend and Ext.override
12.2.1.    Extending classes
12.2.2.    Make it your own with Overrides
12.3.    Applying methods and properties with Ext. apply
12.3.1.    Beware to only ApplyIf
12.4.    Handling those events
Summary

13.    Build a composite widget
13.1.    Reusable and extendable are in the spirit of Ex
13.2.    Let Construction begin
13.2.1.    Setting up the ‘border’ layout
13.2.2.    Build the Data Grid in the center
13.2.3.    Adding a form panel to the east side
13.2.4.    Tying in the form panel with a tab panel
13.2.4.1.    Adding a click handler to the data grid
13.2.4.2.    Load the form from the Data Grid
13.2.5.    Submitting data changes
13.2.6.    Reflecting changes in the Data Grid
Summary

14.    Applying advanced UI techniques
14.1.    Custom Grid to form Drag and Drop
14.2.    Adding a context menu on your grid
14.3.    Adding custom Key Handlers
Summary