reference function from within column renderer

[ttbgwt]

how can I reference the call to myFunction correctly from within the mouseover event on the column renderer?




Ext.define('MYAPP.view.grid.Tags', {


extend: 'Ext.grid.Panel',


initComponent: function () {


var me = this;


var config = {
store: store,


columns: [
Ext.create('Ext.grid.RowNumberer', {
id: 'rowId',
width: 50,
header: 'Row'
}),
{
id: 'tag',
header: 'Tag',
dataIndex: 'tag',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {


//how can I reference the call to myFunction correctly?


//also, is there a way to pass in the event object to myFunction on the span's mouseover event?
return '<span onmouseover="javascript:myFunction(' + value + ');">' + value + '</span>';
}
}
]
};


Ext.apply(me, config);


me.callParent(arguments);


},


myFunction: function (data, eventObj) {
var me = this;


if (!eventObj) var eventObj = window.event;
var relTarg = eventObj.relatedTarget || eventObj.fromElement;
}


});

[evant]

See code below that answers both things:



Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',

initComponent: function(){
this.store = {
fields: ['name'],
data: [{
name: 'Name 1'
}, {
name: 'Name 2'
}]
};

this.columns = [{
flex: 1,
header: 'Name',
dataIndex: 'name',
scope: this,
renderer: this.myRenderer
}];
this.callParent();
this.on('itemclick', this.handleClick, this);
},

myRenderer: function(v) {
return '<span class="foo">' + v + '</span>';
},

handleClick: function(view, record, row, rowIdx, e){
if (e.getTarget('.foo')) {
console.log('foo!');
}
}
});

Ext.onReady(function(){
new MyGrid({
renderTo: document.body,
width: 400,
height: 200
});
});