Calling member functions on click/tap within sencha touch 2 templates

Question

I am rather new to sencha touch, I've done a lot of research and tutorials to learn the basics but now that I am experimenting I have run into a problem that I can't figure out.

I have a basic DataList which gets its data from a store which displays in a xtemplate.

Within this template I have created a member function which requires store field data to be parsed as a parameter.

I would like to make a thumbnail image (that's source is pulled from the store) execute the member function on click/tap.

I can't find any information on this within the docs, does anyone know the best way to go about this?

Here is a code example (pulled from docs as I can't access my actual code right now).

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>'
{
    tapFunction: function(name){
       alert(name);
    }
}
);
tpl.overwrite(panel.body, data);

I want to make the paragraph clickable which will then execute the tapFunction() member function and pass the {name} variable.

Doing something like onclick="{[this.tapFunction(values.name)]} " does not seem to work.

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-10-23T14:58:41

I think functions in template are executed as soon as the view is rendered so I don't think this is the proper solution.

What I would do in your case is :

Add a unique class to your < p > tag

tpl : '<p class="my-p-tag">{name}</p>'

Detect the itemtap event on the list

In your dataview controller, you add an tap event listener on your list.

refs: {
  myList: 'WHATEVER_REFERENCE_MATCHES_YOUR_LIST'
},
control: {
  myList: {
    itemtap: 'listItemTap'
  }
}

Check if the target of the tap is the < p > tag

To do so, implement your listItemTap function like so :

listItemTap: function(list,index,target,record,e){
  var node = e.target;
  if (node.className && node.className.indexOf('my-p-tag') > -1) {
    console.log(record.get('name'));
  }
}

Hope this helps

Calling member functions on click/tap within sencha touch 2 templates

1 Answers