Sencha touch 2 : getting item index in itemTpl

Question

In the documentation of XTemplate, {#} can be used to get the current array index.

When I use it in the itemTpl of an xlist, I always get 1 instead of the index:

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

always produces "Item n°1" even if my store contains several items.

Am I doing something wrong ?

Answer 1

Note that you're using a Ext.List which fetchs data from a Ext.data.Store, not an Array, so XTemplate processes only 1 item at one time. That's why the {#} (also called xindex) always return 1.

A suggest to work-around this is to set manually the index of items in your store once it's loaded, like this: (listener for your Store)

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

Hope it helps.