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属性，这就是我为模板中的每个项目添加了一个类的原因。

如何从xtype显示tpl？

1 个答案: