Question

在XTemplate的文档中，{＃}可用于获取当前数组索引。

当我在xlist的itemTpl中使用它时，我总是得到1而不是索引：

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

即使我的商店包含多个商品，

始终会生成“商品编号1”。

我做错了吗？

Answer 1

请注意，您使用的是 Ext.List ，它从 Ext.data.Store 中获取数据，而不是数据，因此XTemplate只处理1个项目时间。这就是{＃}（也称为xindex）总是返回1的原因。

建议解决这个问题，一旦加载商品，就手动设置商品的索引，如下所示:(商店的监听器）

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

希望它有所帮助。

Answer 2

我遇到了同样的问题，我提出了这个问题：

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

我更喜欢这种解决方案，而不是向商店添加额外的属性。

顺便说一句，你不需要将<tpl for="."></tpl>放在itemTpl中，它是隐含的。

Answer 3

这是“按设计”，因为你没有在这里循环记录/数组。模板为商店的每个元素实例化一次。

另见http://www.sencha.com/forum/showthread.php?179728-Autonumber-in-Template-in-DataView

Answer 4

我遇到了同样的问题，遇到了这个线程＆amp;以为应该有更好的解决方案。在查看DataView的代码之后，我注意到以下可覆盖的方法：

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

所以有一个索引，你只需要添加一点覆盖:)。我更喜欢这个快速解决方案，将索引添加到我的数据对象并覆盖为覆盖目的而提供的方法。

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;
    }
});

Sencha touch 2：在itemTpl中获取项目索引

4 个答案: