Question

以下代码用于主视图，即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)

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

以mvc模式模仿的sencha

1 个答案: