PDA

View Full Version : link renderer in datagrid column



lakshdn
2 Dec 2013, 11:41 AM
hi,

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');
},

Farish
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.

lakshdn
3 Dec 2013, 7:13 AM
Hi,

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

Farish
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', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "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;
this.function1();
me.callParent(arguments);
},
function1 : function()
{
console.log("function1");
this.function2();
},
function2 : function()
{
console.log("function2");
}
});

var grid = Ext.create('Ext.grid.EventPanel', {
enableColumnMove: false,
multiSelect: true,
store: store,
autoScroll: true,
columns:
[
{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.