xtype에서 tpl을 표시하는 방법은 무엇입니까?

Question

내 MatchDetail.js에 있습니다 내 MatchDetailTpl.js에

items:[{ 
    xtype: 'matchdetailtpl', 
    flex: 1 
}, 

와이 : 난 내 MatchDetail.js의 설정에 TPL을 배치하면

tpl:new Ext.XTemplate([ 
    '<tpl for=".">', 
     '<div>', 
     '<div><h1>{firstName} {lastName}</h1> from {league} - <i>{division}</i></div>', 
     '</div>', 
    '</tpl>', 
].join('')) 

는 {}는의를 표시 제대로되었지만 일단 위의 예처럼 구조화하면됩니다. 내가 얻는 것은 모두 빈 카드입니다.

tpl이 표시되도록 어떻게 처리해야합니까?

Answer 1

"xtype"은 해당 별칭을 가진 클래스의 인스턴스를 만듭니다. 그 클래스는 MathDetailTpl.js의 나머지 내용에 포함되어 있다고 가정합니다 (구성의 한 부분 만 보여줍니다).

MathDetailTpl 클래스가 실제로 Ext.Component라고 가정하면 tpl이 렌더링되도록 클래스의 인스턴스에 data을 제공하기 만하면됩니다. renderTpl 및 renderData을 사용해 볼 수도 있습니다.

MathDetailTpl.js의 내용을 게시하고, 더 많은 도움을 받으려면 첫 번째 코드 블록의 items 배열에서이 코드를 사용하는 방법을 게시하십시오.

UPDATE 귀하의 의견을 바탕으로

, 당신은 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 
}] 
... 

itemSelector 속성은 내가 템플릿의 각 항목에 대한 DIV에 클래스를 추가 한 이유입니다, DataView를의 필요합니다.