如何从xtype显示tpl？

我有这个在我的MatchDetail.js：如何从xtype显示tpl？

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(''))

如果我把第三方物流在我MatchDetail.js配置：{}显示它的了正确，但一旦我像上面的例子那样构造它。我得到的只是一张空白的'卡片'。

这应该如何处理，以便tpl显示？

来源

2012-04-26 sevenshot

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

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

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

UPDATE

基于您的评论，你试图使用一个集中存储与XTemplate。您正在寻找的魔术胶水是一个Ext.DataView（或Ext.view.View，分机4）。

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

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

来源

2012-04-26 19:10:58

你对数据是正确的。显然我的商店的数据没有传递给MatchDetailTpl.js ...我把tpl放在MatchDetailTpl.js上，并试图从MatchDetail.js中调用它在retro中，有3个文件... index.html （具有列表），MatchDetail.js（处理项目的容器）和MatchDetailTpl.js（包含tpl）如果数据与tpl一起放置，它们将正确显示。但我需要的是使用在我的商店中找到的集中式数据，使不同的视图组件共享同一个商店，其参考可从任何地方访问。 – sevenshot 2012-04-27 03:30:33

解决了！显然，从下面的代码我的控制器在我的xtype不针对正确的观点。js文件 showDetail：功能（列表，记录）{ \t \t this.getMain（）推（{ 的xtype： 'matchdetail'， }） } – sevenshot 2012-04-28 18:20:16

如何从xtype显示tpl？

回答

相关问题