getting index value 0 from dataview any list itemtap from sencha touch

Question

I am unable to get index value form the dataview:

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

Edited: If i put data static on store it works fine but it does not work while getting data from server:

it works like as displayed on list:

      {    
          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>',
    ] 
  },

Here, I tap many times on different row but only gets index 0, why is this? why am i not getting different index value while tapping different row of list item;

My JSON

Answer 1

I tried and working perfectly for me, Let me share what i did.

Model

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

Store

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
    }

});

List

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

Output

As you can see itemtap function also printing correct cat_id

UPDATE

Based on your comment

{    
   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

I don't really know what's wrong with your code as I tested it and it worked fine. However, a few things are wrong.

• You do not need the for loop in your itemTpl as "itemTpl" is already iterating in you data array for you. You would need it if you were using just "tpl".
• Avoid to have your listeners in your view. Instead, get a reference to your list in your controller, and set the listeners there. This is bad practise and it breaks the NVC pattern.

Here is a small version that works on my te4st application:

{
    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..
        }
    }
}