PDA

View Full Version : How to know what <a> of XTemplate tpl HTML clicked?



glafrance
10 Jul 2013, 3:18 PM
I have the following code to render two <a> links (Edit and Archive) in one column of a grid.

In the cellclick handler function, how can I know whether the Edit <a> was clicked, or if the Archive <a> was clicked.


renderer: function (value, meta, record, rowIndex, colIndex, store) {
var template = new Ext.XTemplate('<tpl for="id"><a href="#" itemId="edit" style="color: #4480b4;padding-right: 20px;">' + 'Edit' +
'</a><a href="#" itemId="archive" style="color: #4480b4;">' + 'Archive' + '</a></tpl>');
return template.applyTemplate(record.data);
}

Ilay
10 Jul 2013, 10:01 PM
You can add ID from your record.data
and use it like this
e.g


renderer: function (value, meta, record, rowIndex, colIndex, store) {
var template = new Ext.XTemplate('<tpl for="id"><a href="#"
id=record.data.ID itemId="edit" style="color: #4480b4;
padding-right: 20px;">' + 'Edit' + '</a>
<a href="#" itemId="archive" style="color: #4480b4;">' + 'Archive' + '</a></tpl>');
return template.applyTemplate(record.data);}

glafrance
11 Jul 2013, 9:48 AM
Thanks, the following is a more complete solution. One question, why is the cellclick handler being called twice? How can I prevent that? I've tried this but does not work:


eventObj.stopPropagation();
eventObj.preventDefault();




renderer: function (value, meta, record, rowIndex, colIndex, store) {
var template = new Ext.XTemplate('<tpl for="id">' +
'<a href="#" class="editlink" style="color: #4480b4;padding-right: 20px;">' + 'Edit' +
'</a><a href="#" class="archiveLink" style="color: #4480b4;">' + 'Archive' + '</a></tpl>');
return template.applyTemplate(record.data);
}

onClickServiceAlert: function(view, cell, cellIndex, record, row, rowIndex, eventObj) {
if(eventObj.type === 'click' && eventObj.target.tagName === 'A'){
var linkClicked = (eventObj.target.className);
if(linkClicked === 'archiveLink'){
alert("archive was clicked");
}else{
alert("edit was clicked");
}
}
},

glafrance
11 Jul 2013, 10:26 AM
Solved. Problem was controller init() being called twice. We have a dashboard module that uses a view in the other module. So the dashboard inits the controller. I removed other code that inits the controller again. Problem solved.