View Full Version : Best practices for promote a element to a Class

8 Oct 2010, 4:30 AM
When and when not to promote an element to a class in Designer?

And related (I think), could someone explain me when use lazy or immediate rendering and how? And the difference in order of client resource usage vs. fast application rendering.

I've searched in the forum but I've some doubt too.


8 Oct 2010, 6:02 AM
Hey Filippo,

Typically, it is useful to promote a component to be a class of its own when one of a few things will occur (including but not limited to):

You believe the component could be re-used more than once, even with slightly different configuration in each use.
The component is large enough or has enough responsibility and behavior that it would be best to put that behavior in its own class rather than inside of a parent class. In other words, avoiding a monolithic component and promoting a "separation of concerns" in your architecture.
It requires a lot of custom configuration that the Designer cannot handle, e.g., plugins, UXs, etc. It would then be easier to modify the configuration when it's in a class of its own, rather than modifying the configuration when it's a deeply nested child of another component.

RE Rendering - In general, the question is User Experience vs Resource Consumption. When a component is pre-rendered, yet "hidden" (negative x/y offsets), it is in a state where it can be shown immediately to the user (e.g. an Ext.Window). All of its images & DOM are rendered and ready to go, so it's a nice user experience. However, it takes up some resources by having the component's footprint in the DOM.

Usually it's a judgement call you need to make. If the component won't likely be seen by the user, then wait to render it until it's demanded. After it's demanded and used, you can make another judgement call to keep it rendered or to destroy it. Take Ext.Window for example. By default, we render the window hidden when it's instantiated. When the window has show() called on it, we simply un-hide it. All of the DOM and images are loaded and it gives a good user experience. However, also by default, we destroy the window when it is closed (X button, or close() is called)...assuming that the window will not be re-used anytime soon.

I hope that helps!

8 Oct 2010, 7:26 AM
Tanks that's now more clear.

I've in my app. two tab panels, One with a form (a data entry panel) large used and a panel with a grid. The first panel is the visible one at the startup.

How to conmfigure the options to experiment both pre-rendering and on demand rendering of the second panel? Panels have the "defaults" like a window?

8 Oct 2010, 7:38 AM
Yes all Ext.Container subclasses have a "defaults" configuration. You can set the "deferredRender" to true or false on the TabPanel component. See this for more information: http://dev.sencha.com/deploy/dev/docs/?class=Ext.TabPanel&member=deferredRender