 <p>I'm pretty sure that is not how JavaScript scoping works...</p> <p>In your example there are 2 ways to do what you would want to do:</p> <pre><code>//this is the bad way imo, since its not really properly scoped. // you are declaring the planeEarth and tpl globally // ( or wherever the scope of your define is. ) var plantetEarth = { name: "Earth", mass: 1.00 } var tpl = new Ext.Template(['&lt;tpl for"."&gt;', '&lt;p&gt; {name} &lt;/p&gt;', '&lt;/tpl&gt;'].join('')); tpl.compile(); Ext.define('casta.view.Intro', { extend: 'Ext.tab.Panel', //alias: 'widget.currentDate', //this makes it xtype 'currentDate' //store: 'CurrentDateStore', initComponent: function(){ this.callParent(arguments); }, html:tpl.apply(planetEarth) }); </code></pre> <p>or </p> <pre><code>//I would do some variation of this personally. //It's nice and neat, everything is scoped properly, etc etc Ext.define('casta.view.Intro', { extend: 'Ext.tab.Panel', //alias: 'widget.currentDate', //this makes it xtype 'currentDate' //store: 'CurrentDateStore', initComponent: function(){ this.tpl = new Ext.Template(['&lt;tpl for"."&gt;', '&lt;p&gt; {name} &lt;/p&gt;', '&lt;/tpl&gt;'].join('')); this.tpl.compile(); this.tpl.apply(this.planetEarth); this.html = this.tpl.apply(this.planetEarth) this.callParent(arguments); }, }); </code></pre>