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

MatchDetail.js config:{} に tpl を配置すると、適切に表示されますが、上記の例のように構成すると、私が得るのは空白の「カード」だけです。

tpl が表示されるようにするには、これをどのように処理する必要がありますか?

4

1 に答える 1

1

「xtype」は、そのエイリアスを持つクラスのインスタンスを作成します。class は、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
}] 
...

itemSelector属性は DataView に必要です。そのため、テンプレートの各アイテムの div にクラスを追加しました。

于 2012-04-26T19:10:58.717 に答える