Extension:Fisheye (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: An OSX dock-style fisheye menu |
| Author: Matjaž Lipuš (matjaz) |
| Published: Aug 8, 2007 |
| Version: 1.1 |
| Ext Version: 1.1 |
| License: |
| Demo Link: View Demo |
| Forum Post: View Post |
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.