0

下面的代码用于主视图，即 main.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'
                 }

                 ]
    }
});

intro.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)
4

1 回答 1

1

initComponent 将在设置 html var 后的某个时间被调用。而是像这样定义您的 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 }
            }]
    }
});
于 2012-05-25T16:03:53.253 回答