Inspired by Sean McDaniel’s WindowBlinds extension, I’ve decided to work on Window Drawers. His extension is used in many places, including a contract in which we worked on briefly together. Sean provided a prototype of his code for Window drawers, which used some of the same code base as the blinds extension. His solution is very light weight, relative to my approach, which ultimately makes it faster.Click here to view the great (and configurable) example of Sean’s WindowBlinds extension directly from his site.

However, I wanted to take a different approach with the drawer solution, using Ext’s components, which provides the developer a means to use this as a generic panel, adding what ever they wish.

For now here is a snapshot and a teaser video.

Some remaining action items:

- Finalize Z-ordering issue (windowmanager, etc)

- Resizing for the window needs to be managed properly.

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