The default mode for a Heron app is to be "autolaunched", i.e. created and rendered into an Ext JS ViewPort or a page div. In some cases you want to have more control, for example when combining Heron with other toolkits or switching apps.
This trivial example shows embedding of any Heron layout into a div element on a page where you control the creation explicitly with Ext.onReady(). First you need to include NoLaunch.js to suppress autolaunching (or set Heron.noAutoLaunch = true; explicitly). then you have control over the Heron component instantiation/rendering within Ext.onReady().
See the Config.js file how this is done.