从数据视图获取索引值 0 来自 sencha touch 的任何列表 itemtap

Question

我无法从数据视图中获取索引值：

    {          
              xtype: 'list', 
              itemId: 'catList',
              store: 'CategoryStore',    

             scrollable: false,
              layout: 'fit',          
              itemHeight: 20,
              itemTpl: [
              '<div>',
              '<tpl for="data">',
              '<span >{category_name}</span> ',             
          '</tpl>',
          '</div>'],
listeners: {
   'itemtap': function(list, index, target, record, e, eOpts){
     console.log(record.get('cat_id'));
}
}
}

已编辑： 如果我将数据静态存储在存储中，它可以正常工作，但在从服务器获取数据时它不起作用：

它的工作方式与列表中显示的一样：

      {    
          xtype: 'list', 
          itemId: 'catList',
          scrollable: false,

    data: [
    { category_name: 'A', cat_id: 1},
    { category_name: 'B', cat_id: 2},
    { category_name: 'C', cat_id: 3},
    { category_name: 'D', cat_id: 4},
    { category_name: 'E', cat_id: 5},


    ],
    loadingText: "Loading Words...",
    emptyText: '<div>{message}</div>',
    autoLoad:true,
    itemTpl:[
    '<tpl for=".">',
          '<span >{category_name}</span> ',             
      '</tpl>',
    ] 
  },

在这里，我在不同的行上点击了很多次，但只得到索引 0，这是为什么呢？为什么我在点击列表项的不同行时没有得到不同的索引值；

My JSON

Answer 1

我尝试过并为我完美地工作，让我分享一下我所做的。

型号

Ext.define('Myapp.model.Category', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'cat_id', type: 'integer' },
            { name: 'category_name', type: 'string' },
            { name: 'created_date', type: 'string' },
            { name: 'order', type: 'integer' },
            { name: 'status', type: 'integer' },
            { name: 'deleted', type: 'integer' },
            { name: 'type', type: 'integer' }
        ]
    }
});

商店

Ext.define('Myapp.store.Category', {
    extend: 'Ext.data.Store',
    requires: [
        'Myapp.model.Category'
    ],
    config: {
        storeId: 'category',
         model: "Myapp.model.Category",
         proxy: {
            type: "ajax",
            url : "http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1376475408437&page=1&start=0&limit=25",
            reader: {
                type: "json",
                rootProperty: "data"
            }
        },
        autoLoad: true
    }

});

列表

 {          
    xtype: 'list', 
    itemId: 'catList',
    store: Ext.create('Myapp.store.Category'),
    layout: 'fit',      
    itemHeight: 20,
    itemTpl: [
              '<div>',
              '{category_name}',             
              '</div>'],
            listeners: {
               itemtap: function(list, index, target, record, e, eOpts){
                 console.log(record.get('cat_id'));
            } 
     } 
  }

输出

如您所见，itemtap 函数也打印正确的 cat_id

更新

根据您的评论

{    
   xtype :'panel',
   items : [{
       xtype : 'toolbar',
       itemId: 'categoryName'  // Give itemId  
      },
      {
       xtype: 'list', 
       itemId: 'catList',
       height : '100%',
       store: Ext.create('GoodNews.store.Category'),
       layout: 'fit',      
       itemHeight: 20,
       itemTpl: [
         '<div>',
         '{category_name}',             
         '</div>'],
         listeners: {
           itemtap: function(list, index, target, record, e, eOpts){
             var catId = record.get('cat_id');
             var categoryName = record.get('category_name');
             // Set the title like this
             this.getParent().getComponent('categoryName').setTitle(categoryName);
           } 
         }                
       }]     

 }

Answer 2

我真的不知道你的代码有什么问题，因为我测试过它并且运行良好。但是，有些事情是错误的。

• 您不需要在 itemTpl 中使用 for 循环，因为“itemTpl”已经存在 为您迭代您的数据数组。如果你是，你会需要它 仅使用“tpl”。
• 避免让您的听众出现在您的视野中。反而， 在控制器中获取对列表的引用，并设置 那里的听众。 这是一种不好的做法，它破坏了 NVC 模式。

这是一个适用于我的 te4st 应用程序的小版本：

{
    xtype: 'list', 
    itemId: 'catList',
    scrollable: false,
    data: [
        { category_name: 'A', cat_id: 1},
        { category_name: 'B', cat_id: 2},
        { category_name: 'C', cat_id: 3},
        { category_name: 'D', cat_id: 4},
        { category_name: 'E', cat_id: 5},
    ],
    loadingText: "Loading Words...",
    emptyText: '<div>{message}</div>',
    autoLoad:true,
    itemTpl: '{category_name}',   
    listeners: {
        'itemtap': function(list, index, target, record, e, eOpts){
            //TODO: whatever..
        }
    }
}