View Full Version : link renderer in datagrid column

2 Dec 2013, 11:41 AM

I am new to extjs. I have a link renderer in a datagrid column and have onClick javascript function listener registered as below. When i click the link, i am getting an error - Object [object HTMLAnchorElement] has no method 'openEditDatagridWindow'.

Can someone please help me here. Have been stuck for a while looking for alternate ways to render.
I appreciate your help.

-- column setter code
column.renderer = this.editLinkRenderer;

-- renderer function
editLinkRenderer: function(value, p, record, r, c, s, cview) {
return Ext.String.format('<a href="#" onClick="this.openEditDatagridWindow()">{0}</a>', 'Edit');

--renderer click handler
openEditDatagridWindow: function() {
alert('in edit window');

3 Dec 2013, 12:14 AM
I can only suggest a way to debug and that might point you in the right direction.

Use console.log(this); after you assign column.renderer = this.editLinkRenderer; and then again inside your editLinkRenderer function. You will see that "this" refers to different objects! thats why the onClick handler gives an error.

3 Dec 2013, 7:13 AM

Thanks for your response. I am aware that the scope of 'this' changes across containers but how do we solve this issue?

3 Dec 2013, 7:58 AM
can you post an example code which can be easily run and tested? I have the following example for you which works:

var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.define('Ext.grid.EventPanel', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
function1 : function()
function2 : function()

var grid = Ext.create('Ext.grid.EventPanel', {
enableColumnMove: false,
multiSelect: true,
store: store,
autoScroll: true,
{header: 'Name', dataIndex: 'name', flex: 1 },
{header: 'Email', dataIndex: 'email', flex: 2 },
{ header: 'Phone', dataIndex: 'phone', flex: 2 }
renderTo: Ext.getBody(),
width: 400,
heigth: 500

One thing which you can try is to store this in another variable first (when you call editLinkRenderer)

var me = this;

and then use me.openLinkRenderer instead of this.openLinkRenderer as onClick handler. See if this helps.