如何从xtype显示tpl？

Question

我的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放在我的MatchDetail.js配置上：{}，那么它的显示就正常了，但是一旦我像上面的示例那样构造了它。我得到的只是一张空白的卡片。

如何处理这件事，使tpl出现呢？

Answer 1

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

假设您的MathDetailTpl类确实是一个Ext.Component，您可能只需要向类的实例提供data，以便呈现tpl。您也可以尝试使用renderTpl和renderData。

发布MathDetailTpl.js的内容，以及在第一个代码块中如何在items数组中使用它以获得更多帮助。

更新

根据您的评论，您正在尝试使用带有XTemplate的集中式存储。您正在寻找的神奇胶水是Ext.DataView (或Ext 4中的Ext.view.View )。

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
}] 
...

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