Question

下面的代码为主视图, 即主视图 js, 在那里我已拨打Intro.js, 即另一种视图。现在我无法在模板上提供数据。我是新来的 sencha, 我认为我在宣言上搞砸了一些事情。

Ext.define("casta.view.Main", {
    extend:  Ext.tab.Panel ,
    apitoken: NULL ,
    requires: [
         Ext.TitleBar ,
         Ext.Video ,
         casta.view.Intro 

    ],
    config: {
        tabBarPosition:  top ,

        items: [


                { title: Intro ,
                   xclass:  casta.view.Intro  ,
                   iconCls: user 
                 }

                 ]
    }
});

Itro.js 和下面一样。我想在宣布变数时, 我搞砸了一些事情。它显示空白屏幕。

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


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

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

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

下面是控制台日志

tpl is not defined

[在此错误上断开]

html:tpl.apply(planetEarth)

Answer 1

在 html var 设置之后的某个时候, InitComponent 将会被调用。相反, 您的 tpl 定义会是这样 :

Ext.define( casta.view.Intro , {
    extend:  Ext.tab.Panel ,
    tpl:  <p> {name} </p> ,
    initComponent: function(){
        //Be sure to use the var keyword for planet earth, otherwise its declared as a global variable
        var planetEarth = { name: "Earth", mass: 1.00 };
        this.setHtml(this.getTpl().apply(planetEarth));
    }
});

这将工作, 遵循您的模式, 但你可能想要定义该组件, 更像 :

Ext.define( casta.view.Intro , {
    extend:  Ext.Container ,
    tpl:  <p> {name} </p> 
});

然后把它当做:

Ext.define("casta.view.Main", {
    extend :  Ext.tab.Panel ,
    apitoken :  NULL ,
    requires : [ Ext.TitleBar ,  Ext.Video ,  casta.view.Intro ],
    config : {
        tabBarPosition :  top ,
        items : [{
            xclass :  casta.view.Intro ,
            title :  Intro ,
            iconCls :  user ,
            data: {name: "Earth", mass: 1.00 }
            }]
    }
});

友情链接