訪問在initComponent中聲明的變量sencha

Question

我需要在mchac模式下在sencha中渲染模板，所以在InitComponent上我聲明瞭一些變量，但我無法在init函數外部訪問這些變量。我也嘗試之後

Ext.define('casta.view.Intro', { 
    extend: 'Ext.tab.Panel', 
    //alias: 'widget.currentDate', //this makes it xtype 'currentDate' 
    //store: 'CurrentDateStore', 


    initComponent: function(){ 
     this.planetEarth = { name: "Earth", mass: 1.00 }; 

     this.tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join('')); 
     this.tpl.compile(); 
     this.callParent(arguments); 

    }, 
    html:this.tpl.apply(this.planetEarth) 
}); 

ERROR

this.tpl is undefined 
[Break On This Error] 

html:this.tpl.apply(planetEarth) 

Answer 1

我敢肯定這不是JavaScript的作用域是如何工作的？

在您的例子有2種方式做你會想做的事：

//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) 
}); 

或

//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(['<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); 

    }, 

});