Pass Argument From tpl Sencha - extjs

Question

My json is as follow:
({
"status":"TRUE",
"message":"Words",
"data":[
{
"name":"paint",
"author":"snooky",
"word_id":"1",
"category":"Business",
"definitions":[
{
"rating":"Green",
"defintion":"to put color to in something",
"def_id":"1",
"example":null,
"author":"pit",
"is_favourite":"yesStar"
},
{
"rating":"Red",
"defintion":"this is a new definition of word paint.",
"def_id":"42",
"example":null,
"author":"bull",
"is_favourite":"noStar"
}
]
}
]
})
I am parsing this value and show it in tpl as shown below:
{
xtype: 'list',
store: 'words',
height: 140,
layout: 'fit',
scrollable: {
direction: 'vertical',
directionLock: true,
},
margin: '0 0 5px 0',
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2><b>{name}</b></h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div >',
'<div class="paragraph-def" ><p id = "wordDefinition" >{defintion}</p></div>',
'<span class="authorBox"><i>Author: {author}</i></span>',
'<div id="favourite" class="{is_favourite}" ></div>',
'</div>',
'</li>',
'</ul>',
'</tpl>',
'</li>',
'</ul>',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event) {
if (event.target.id=='wordDefinition') {
alert("Rating clicked!");
console.log(event.target.id);
console.dir("Definition--"+record);
//ratingStar();
}
if (event.target.id=='favourite') {
alert('Favourite clicked!');
console.log(event.target.id);
console.dir("Favourite--"+record);
//addToFavourite();
}
}
}
}
My Console is as follow:
![console][1]
As shown in above pic i want to access def_id and word_id when user clicks on the respective tpl as shown in below image when user clicks on definition i.e overweight football supporter i need it's word_id and when user clicks on star i need to get word_id.
Doing record.data.data[0].definitions[0].def_id i can get it but i want it to be dynamic as there may be 4-5 definition later.
![rate][2]
My store:
Ext.define('MyApp.store.wordsmenu',{
extend: 'Ext.data.Store',
config:
{
autoLoad:true,
model: 'MyApp.model.words',
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'json',
reader:
{
rootProperty:''
}
}
}
});
My model are:
Ext.define('MyApp.model.words', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'status', mapping: 'status'},
{name: 'message', mapping: 'message'},
{name:'data', mapping: 'data'},
{name: 'definitions', mapping: 'definitions.defintion'},
{name: 'ratings', mapping: 'definitions.rating'},
]
}
});
I am able show json value in tpl. Now, i should keep track of click on specific
definition and star and send its id to server but unable to get id.
For reference of record you can check here.
Any Help!

Answer 1

It seems that roll_id is a field of your model, so you should be able to get it from your record:
var rollId = record.get('roll_id');
ratingStart(rollId);