Enable lazyloading in javascript while using extjs

When we choose java script to create RIAs, as we keep on writing our application we happen to have large number of included JavaScript files very soon. This will degrade the performence of the whole application. Luckily, Ext js provides one possible way.

First, you must understand xtype. The mistery hides behaind the power of xtype. Below is the explaination on the ext js site. (http://www.sencha.com/learn/Ext_2_Overview#Component_XTypes)

However, the real power of XTypes is how they can be used to optimize Component creation and rendering. Any Component can be created implicitly as an object config with an xtype specified, allowing it to be declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources until they are actually needed. In complex, nested layouts containing many Components, this can make a noticeable improvement in performance.

//Explicit creation of contained Components:
var panel = new Ext.Panel({
...
items: [
new Ext.Button({
text: 'OK'
})
]
};

//Implicit creation using xtype:
var panel = new Ext.Panel({
...
items: [{
xtype: 'button',
text: 'OK'
}]
};

In the first example, the button will always be created immediately during the panel's initialization. With many added Components, this approach could potentially slow the rendering of the page. In the second example, the button will not be created or rendered until the panel is actually displayed in the browser. If the panel is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and will never consume any resources whatsoever.

If your component do not require to be rendered at the first time, you can download the script laterly on demand. Below is a sample method to download the scripts.

<script type="text/javascript">

function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}

onload = function()
{
dhtmlLoadScript("dhtml_way.js");
}

</script>