Javascript 如何从xtype显示tpl？

我的MatchDetail.js上有：

items:[{
   xtype: 'matchdetailtpl',
   flex: 1
},

在我的MatchDetailTpl.js上：

tpl:new Ext.XTemplate([
   '<tpl for=".">',
      '<div>',
         '<div><h1>{firstName} {lastName}</h1> from {league} - <i>{division}</i></div>',
      '</div>',
   '</tpl>',
].join(''))

tpl:new Ext.XTemplate([
'',
'',
“{firstName}{lastName}来自{league}-{division}”，
'',
'',
].加入（“”）

如果我将tpl放在我的MatchDetail.js配置上：{}，它会正确地显示出来，但一旦我像上面的示例那样构建了它。我得到的只是一张空白的“卡片”

如何处理这个问题，以便显示tpl？

这个“xtype”将使用该别名创建类的实例。我假设该类是MathDetailTpl.js的其余内容所包含的（您只向我们展示了配置的一部分）

假设您的MathDetailTpl类确实是一个Ext.Component，您可能只需要向该类的实例提供

数据

，以便呈现

tpl

。您还可以尝试使用

renderTpl

和

renderData

发布MathDetailTpl.js的内容，可能还有更多关于如何在第一个代码块的

items

数组中使用它的信息，以获取更多帮助

更新

根据您的评论，您正在尝试使用带有XTemplate的集中式存储。您正在寻找的魔力胶水是Ext.DataView（或ext4中的Ext.view.view）

---

DataView需要

itemSelector

属性，这就是为什么我为模板中的每个项向div添加了一个类。

关于数据，您是对的。显然，我的商店中的数据没有传递到MatchDetailTpl.js。。。我将tpl放在MatchDetailTpl.js上，并尝试在retro中从MatchDetail.js调用它，共有3个文件。。。index.html（包含列表）、MatchDetail.js（处理项目的容器）和MatchDetailTpl.js（包含tpl）如果数据与tpl放在一起，它们会正确显示。但我需要的是使用一个集中的数据，它可以在我的存储中找到，使不同的视图组件共享同一个存储，它的引用可以从任何地方访问。解决了它！显然，我的控制器上下面代码中的xtype没有指向正确的view.js文件showdeail:function（list，record）{this.getMain（）.push（{xtype:'matchdetail'，}）}

Ext.define('MatchDetail', {
    extend: 'Ext.view.View',
    alias: 'widget.matchDetail',

    itemSelector: 'div.match-detail',
    tpl:new Ext.XTemplate([
       '<tpl for=".">',
          '<div class="match-detail">',
             '<div><h1>{firstName} {lastName}</h1> from {league} - <i>{division}</i></div>',
          '</div>',
       '</tpl>',
    ].join(''))
});

...
items: [{
    xtype: 'matchDetail',
    store: myCentralizedStore
}] 
...