0

我的 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 出现？

4

1 回答 1

1

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

假设您的 MathDetailTpl 类确实是一个 Ext.Component，您可能只需要提供data给该类的实例以便tpl渲染。您也可以尝试使用renderTpland 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 中添加一个类的原因。

于 2012-04-26T19:10:58.717 回答