Access to variables declared inside initComponent sencha

I'm sure this is not how the JavaScript scope works ...

In your example, there are two ways to do what you would like to do:

//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(['<tpl for".">', '<p> {name} </p>', '</tpl>'].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)
});

or

//I would do some variation of this personally.
//It 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(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
        this.tpl.compile();
        this.tpl.apply(this.planetEarth);
        this.html = this.tpl.apply(this.planetEarth)
        this.callParent(arguments);

    },

});