1

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.

Dave Watt
  • 155
  • 2
  • 14

1 Answers1

5

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

Titouan de Bailleul
  • 12,920
  • 11
  • 66
  • 121
  • Thanks, that's what I was looking for. Would the best method to pass the {name} parameter be by setting the ID of the

    tag to {name} then fetch the ID within the code? Or do you know a better way?

     – Dave Watt Oct 23 '12 at 21:30
  • First of all I don't think using a Name as an ID is a good idea, names are not unique. But you don't event have to use IDs; in the listItemTap function you can access the record, so just do record.get('name'); (see edited code) – Titouan de Bailleul Oct 23 '12 at 21:58
  • Perfect, I didn't notice that the record object was available in the scope. Thanks for that. – also the {name} was just an example, in the real code I am passing a unique ID. – Dave Watt Oct 23 '12 at 23:52