The old Icon class was static, requiring users to manage CSS files.  Thus, was not really a fix, but just a convenience.

Here comes Ext.ux.TDGi.iconMgr.  A utility class that automatically sets styles for  you.  It creates and appends to a stylesheet in the dom, eliminating the need to manage CSS entirely.  The icon set contains images in PNG and GIF (IE6), and automatically selects which to use.

example: http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/

Icon Sources:
http://www.famfamfam.com/lab/icons/silk/ and http://www.damieng.com/icons/silkcompanion

Example usage:

The excellent famfamfam silk icon set has been repackaged to include related CSS and JS for use with Ext.

TDGi.icons.tgz

TDGi.icons.zip
This can be used anywhere iconCls is a config option. I.e.:

Below is an example of how to get a formPanel to work inside of an Ext.Window really easily. Simply call the class’s .show() method with a json object or an instance of a Ext.Data.Record object and it will do the rest. I realize that this should have probably been done in a ‘module’ or ’singleton’ pattern but I wanted to exercise my use of classes and Ext.extend, etc. In fact, the class could have been blown out more to accept any instance of a form, etc, but I started to get crunched on time.

Click here to view the example

Click here to download the file formWindow.zip.

Example Code

Here we talk about Ext.extend and how it can be used to your advantage to ‘extend’ or ‘override’ methods or properties from one class to another.