clickable image in grid cell

[balusss]

hi I am trying to insert a clickable picture into one of the grid cells. the images are inserted properly, but the click functionality not working, erring out as 'function_xxx not defined'.

here is my code:


Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();

function commentDisplay(id) {
Ext.Msg.alert("dbFlag=", id);
}

var tempColumns = [{ dataIndex: 'dbFlag', header:'imageClick', width: 80, renderer: function (v,p,r) { if (r.data.dbFlag <1 ) { return '<img src="./assets/images/comment_add.png" onClick="commentDisplay(\''+r.data.dbFlag+'\')">'; }
else { return '<img src="./assets/images/notes_count.gif" onClick="commentDisplay(\''+r.data.dbFlag+'\')">'; }
}
},
{ dataIndex: 'name', header:'name',width:80}
];

var colModel = new Ext.grid.ColumnModel (tempColumns);

var tempStore = new Ext.data.SimpleStore({ fields: ['dbFlag','name'],
data: [['1','Comedy'],['0','Drama'],['1','Action']]
});

var tempGrid = new Ext.grid.GridPanel ( {
id: 'tempGrid',
store: tempStore,
renderTo: Ext.getDom("Area1"),
height: 200,
cm: colModel
});
});

[Animal]

Use a cellclick listener.

It's in the FAQ

[steffenk]

your code is unreadable ;)

i posted an example:
http://www.extjs.com/forum/showthread.php?t=94817

[balusss]

your code is unreadable ;)



hi steffenk, thanks for your reply. For that unreadable code part, i submitted it properly, but there is no way i can cross-check it immediately as it goes for moderation. i corrected it now.

I figured out that moving the commentDisplay_function out of the scope of Ext.onReady() solved my problem.

And for the Animal's suggestion, yeah i tried it, but not suitable for me as i wil be having multiple icons with different functionality to click on them. thanks to him too :)

[Animal]

Well thanks for explaining finally.

Use Saki's RowActions ux.

Until we get Observable Columns, and an ActionColumn class.