Ext.ux.TDGi.iconMgr - a utility class for managing icons and CSS

July 14th, 2008 Jay Garcia

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:

Ext.ux.TDGi.iconMgr and Ext.ux.TDGi.iconBrowser Classes

It also comes with an icon browser, which I will eventually segment images by letter.
Download: zip or tar-gzip (tgz)

Posted in EXT Examples, EXTJS, Ext Extensions | 2 Comments »

famfamfam icons packaged with css for use with Ext 2.x

April 22nd, 2008 Jay Garcia

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.:

Posted in EXT Examples, EXTJS, Ext Extensions | 1 Comment »

How to get titles in collapsed panels for ‘border’ layout.

March 15th, 2008 Jay Garcia

In response to this thread at the Ext forums, I initially created a simple override (Click here to see it action) to the Ext Border Layout. The solution was a quick one hour deal with no magic or gloss. There was some posts soon there after that requested more functionality for this override. These requests include:

  • images for the east/west regions (for CBC)
  • ability to re-use the original title
  • the freedom to insert what ever element object or HTML fragment the end developer desired
  • change from override to extension.

So, I’ve rolled up all of these requests into one Ext.ux.TDGi.BorderLayout class. This solution provides all of the freedom flexibility that was requested.

Click here to view a working example of this extension.  Click here to download the zip file of the full source and example.
Simple Example:

Screenshots:(Internet Explorer 6 and 7)
Example of tdgi_border layout in IE6 and IE7.  IE8 has not been tested!(FF2.x on OS X)

Example of tdgi_border layout in firefox for OSX.
Actual Example Source:

Override Source:

Posted in EXT Examples, EXTJS, Ext Extensions | 2 Comments »

Custom EXTJS Ext.grid.GridPanel Header override

February 27th, 2008 Jay Garcia

This override will allow you to take the columns menu and move it to where ever you want. It was a quick one hour solution for the EXT 2.0 help forums.

Click here to see it in action.

Place this override just after your extjs scripts

This is a modified version of Ext’s array grid panel examle

Posted in EXT Examples, EXTJS, Ext Extensions | No Comments »