Sencha touch 2：itemTplでアイテムインデックスを取得する

Question

XTemplateのドキュメントでは、現在の配列インデックスを取得するために{＃}を使用できます。

私はXlistののitemTplでそれを使用すると、私はいつもの代わりに、インデックスの1を取得：

{ 
     xtype: 'list', 
      store: 'myStore', 
      itemTpl:new Ext.XTemplate(
       '<tpl for=".">', 
         '<div>Item n°{#1}</div>', 
       '</tpl>' 
      ),   
    } 

はいつも私の店はいくつかの項目が含まれている場合でも、「アイテムのn°1」を生成します。

何か間違っていますか？

Answer 1

注を参照してください。そのため、{＃}（xindexとも呼ばれます）は常に1を返します。

これは、ロードされたストアのアイテムのインデックスを手作業で設定することです（あなたのストアのリスナー）

listeners: { 
    load: function(store, records){ 
    store.each(function(record, index){ 
     record.set('index', index); 
    }, 
    store 
); 
} 

希望します。

Answer 2

ここではレコード/アレイをループしていないので、これは「設計通り」です。テンプレートは、ストアの各要素に対して1回インスタンス化されます。

はまた、あなたがExt.data.Store、ないアレイ、そうのXTemplateプロセスを一度に1つだけのアイテムからデータをfetchs Ext.Listを使用しているhttp://www.sencha.com/forum/showthread.php?179728-Autonumber-in-Template-in-DataView

Answer 3

私は同じ問題に走ったと私はこの思い付いた：私は店に余分なプロパティを追加するよりも、このソリューションを好む

itemTpl: [ 
      '<div class="item">' + 
       'Number {[this.getIndex()]}' + 
      '</div>', 
      { 
       getIndex: function() { 
        return document.getElementsByClassName('item').length + 1; 
       } 
      } 
     ] 

。

btwの場合、<tpl for="."></tpl>をitemTplに入れる必要はありません。暗黙的です。

Answer 4

私は同じ問題に遭遇しましたが、このスレッド&が良い解決策があるはずだと考えました。 は、DataViewののコードに見た後、私は以下のオーバーライドメソッドに気づいた：

prepareData: function(data, index, record) { 
    return data; 
} 

だから、インデックスがあり、あなたは少しだけオーバーライドを:)追加する必要があります。 私は、データオブジェクトにインデックスを追加し、オーバーライド目的で提供されているメソッドをオーバーライドする、この簡単なソリューションを好んでいます。配列である `data`と連携itemTpl`私の意見では

Ext.define('MyApp.overrides.dataview.DataView', { 
    override: 'Ext.dataview.DataView', 

    prepareData: function(data, index, record) { 
     if(Ext.isObject(data)) { 
      data.xindex = index + 1; 
     } 
     return data; 
    } 
});