Saving resources with lazy component instantiation

In large applications, instantiating all application objects when the page loads—those that are initially needed and those that might or might not be needed later—will cause a number of unused objects to be sitting in the memory.

Lazy instantiation reduces the amount of consumed resources by initially committing to memory only the configuration of the objects (and not the actual object instances) and deferring instance creation until render time. This recipe explains how lazy instantiation is done.

You will build two panels that look identical. The items of the first panel are explicitly instantiated, and this is how the panel will look:

The second panel's items are instantiated at render time. This is a screenshot of the second panel:

How to do it...

1. 1. Create a function that animates the progress bars used in the panels:

   Ext.onReady(function() {
   var loadFn = function(btn, textItem, statusBar, pBar) {
   btn = Ext.getCmp(btn);
   btn.disable();...