如何從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？

回答

相關問題