View Full Version : What does xtype make lazy?

23 Sep 2010, 8:32 AM
I have heard that xtype can improve performace by lazily creating/rendering components. However, I did a little test and the results have confused me.

As an example I took the layout browser from the Ext examples: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html. To get the downloaded version to work without a web server copy the contents of tree-data.json as a 'children' config property of the root node in layout-browser.js. In that file there is the contentPanel:

var contentPanel = {
items: [
// from basic.js:
start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
// from custom.js:
rowLayout, centerLayout,
// from combination.js:
absoluteForm, tabsNestedLayouts
}Inside basic.js we can see start, absolute, anchor etc are variables containing config objects. They don't need an xtype as panel is the default:

// The default start page, also a simple example of a FitLayout.
var start = {
id: 'start-panel',
title: 'Start Page',
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'start-div' // pull existing content from the page
};There is a comment at the top of basic.js that says

// Note that these are all defined as panel configs, rather than instantiated
// as panel objects. You could just as easily do this instead:
// var absolute = new Ext.Panel({ ... });
// However, by passing configs into the main container instead of objects, we can defer
// layout AND object instantiation until absolutely needed. Since most of these panels
// won't be shown by default until requested, this will save us some processing
// time up front when initially rendering the page.
So test the laziness I turned the 'absolute' panel into a custom panel class created with an xtype. In basic.js:

Andrew.Panel = Ext.extend(Ext.Panel, {

initComponent: function() {
Ext.apply(this, absolute);
alert('making Andrew\'s Panel!');
Ext.reg('Andrew.Panel', Andrew.Panel);and in layout-browser.js "start, absolute, accordian" in the items array becomes "start, {xtype: 'Andrew.Panel'}, accordion".

I expected that the alert would not pop-up when the page is first loaded, but only when the tree item on the left is clicked to display the absolute layout panel. But it pops-up on page load. Now that I think about this more deeply this makes some sense: when the node in the tree is clicked it does
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');and if the panel were still a config literal this wouldn't work (unless Ext did some super clever stuff to match up the id property of the config literals). So then what is the comment about lazy configs talking about. Were the Ext people who wrote this example misunderstanding xtypes as much as I was?

So now my understanding is that at the point in layout-browser.js it does var contentPanel = {...} that is a config literal, as are its items. If the items were written as new Ext.Panel({...}) then at that point they would already be Ext components in memory, but not rendered yet. It is only when contentPanel is added to the items in the Viewport that the config literal of contentPanel is turned into a real component and rendered. I think at this point all of the items within contentPanel are also turned from config literals into components, even though you've not clicked on the tree to display them yet. So xypes/config literals actually made very little difference here.

Please do point out anything I got wrong, or confirm this is how xtypes and config literals work.

14 Oct 2010, 3:14 AM
Thanks to the 'Similar Threads' pane I found a practically identical old thread that confirms my thoughts, not sure why searching didn't find it.