4

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

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

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

即使我的商店包含多件商品，也始终会生成“Item n°1”。

难道我做错了什么 ？

4

4 回答 4

9

请注意，您使用的是Ext.List，它从Ext.data.Store而非数组中获取数据，因此 XTemplate 一次只处理一项。这就是为什么 {#}（也称为 xindex）总是返回 1。

解决此问题的建议是在商店加载后手动设置项目的索引，如下所示：（您的商店的侦听器）

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

希望能帮助到你。

于 2012-04-10T05:12:49.680 回答
2

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

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

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

顺便说一句，您不需要<tpl for="."></tpl>输入 itemTpl，它是隐式的。

于 2013-03-28T00:57:05.497 回答
0

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

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

于 2012-04-09T22:19:19.063 回答
0

我遇到了同样的问题，遇到了这个线程并认为应该有更好的解决方案。在查看 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;
    }
});
于 2013-07-05T09:18:16.020 回答