getting index value 0 from dataview any list itemtap from sencha touch - 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..
}
}
}