From Learn About the Ext JavaScript Library

Definition

Use sharing to support large numbers of fine-grained objects efficiently.

Used in Ext

• Ext.fly

Discussion

N.B. The following is taken directly from jsakalos's forum post on the Flyweight pattern.

Ext.Element wraps a lot of functionality around DOM element/node, for example functions like hide, show, all animation stuff, dimensions getting and setting function and a lot more.

Ext.Element keeps reference to DOM element it is wrapped around in dom property. Once you have an Ext.Element (e.g. you call Ext.get('some-id') it is an instance of Element class and you can work with it as such.

Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext.get('some-one-of-1000-id').hide() so you create 1000 instances of Element just to call one function: hide.

Ext.fly is one instance of Ext.Element with "replaceable" DOM node it is wrapped around. If you call 1000 times Ext.fly('some-one-of-1000-id').hide() you 1000 times replace dom property of one instance of Ext.Element.

Result: higher performance, lower memory usage.

You only need to keep in mind that you cannot keep Element returned by Ext.fly for later use as it's dom will sooner or later gets replaced by another one.

Still having trouble? Imagine a fishing rod and the motion of a fisherman casting his line. At any one time his hook may be in just one place, if he casts it again then any association his hook had with its prior location is gone, obliterated. Ext.fly functions in this same way; moving from location to location.