From Learn About the Ext JavaScript Library

Status

Basic version contributed by Ext community member Ronaldo.

matjaz has ported Ronaldos code to Ext.

Code is stable and working, but some parts of it could be better adjusted to Ext library.

Source available in forum post.

Requested Use Cases

• Similar to OSX dock menu

Possible Requirements

Should match functionality closely with:

• Dojo fisheye (ideally without the sea sickness)

http://dojotoolkit.org/demos/fisheye-demo

• jQuery / Interface

http://interface.eyecon.ro/demos

• Implemented by Safalra

http://www.safalra.com/programming/javascript/mac-style-dock/

Finally, someone has an implementation without the sea sickness I mentioned above re: Dojo. I mean when you are moving slightly side-to-side over an item that is fully zoomed, it should stay at the same size and not resize with the slightest mouse movement. If you actually pay attention in OS X, the effect is smooth because there is a threshold that's wider than each icon fully zoomed in which it does not resize at all, then slowly starts to zoom out only after leaving this threshold width. This particular demo gets that aspect of it correct.

One other detail that they all get wrong, including this one, is that the icons on the end of the dock, opposite from the direction in which the mouse is moving, should never move. The opposite end should be anchored firmly. Only the end that the mouse is traveling toward should be allowed to move/resize while the mouse is over the dock bar. In this example, the opposite end shrinks in the closer you get to the focused end.