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 got the logic down pat for creating icons on the left and right.  If you’re not an OS X user; the icons left of the ‘runway’ (divider) are for launching applications and the right are a location for minimized windows.  What the video shows is what it looks like to register an icon in the dock as an application launcher ( no animation ) and a minimized window container (animated).

Next is setting up the full context menus (minimize, close, etc) and window (app?) registration for the icons.

 Ext Window Drawers Alpha 1 is released today with two new examples; the drag and drop and basic grid window in the desktop.

Click here to download: winDrawers.alpha1.tgz

The following features were added:

• IE6 and IE7 Certification
• Fx3 Certification
• Titles
• Support for [ X ] close button in titles
• Resize finished
• Window.el.move intercepted
• animate : true || false honored

Examples to date:

• Four Drawer basic
• Grid and Form
• Grid to grid DnD (new)
• Web Desktop (new – not complete)

(drag and drop example)

(grid in desktop window example)

Known issues:

• IE6/7 – Issues with z-ordering (desktop only thus far)
• Desktop window maximize to normal size not  hooked properly

Worked on the drawers a little more and wanted to show a simple use case.

Click here to see it in action.  Test drive the four drawer demo and the grid demo below.

To Do list:

• Enable resize for the drawers
• Honor the animate boolean
• Set configurable fx
• enable shadows
• Anything else that the community would like

Per the requested changes from this Extjs.com thread.

Another sneak peak

http://tdg-i.com/img/screencasts/2008-08-08_1812.swf