Here the button is instantiated during the instantiation of the container. The end result is almost exactly the same but the order the objects are created is slightly different.

So in the examples above the 'laziness' is only fleeting, it doesn't really make any difference. However, using xtype configs often makes code much easier to read so generally I'd advise using it wherever possible.

Sometimes it isn't possible to use xtypes, such as in this example:

Code:

Ext.create('Ext.window.Window', {
autoShow: true,
...
});

Floating component like a windows usually aren't added to a container so you need to instantiate them yourself.

There are concrete examples where the xtype approach has real benefits beyond tidy code. I wouldn't call them 'lazy instantiation' though, it's just config manipulation.

Now a subclass can override createItems to change the items. There is still a problem though. If the subclass wants to change the button it can prove difficult. Say we want to change it from a button to a splitbutton, we'd have to create a totally new button in the subclass. Instead we could implement it this way:

With this version we can now override createItems in a subclass and change the config before the button is instantiated. It makes it much easier to change arbitrary config options, even the xtype. xtypes provide a way of making the class of an object a config option just like any other. It's a very technique powerful but try not to think of it as 'lazy instantiation', that'll just skew your understanding of what's really going on.