View Full Version : Ext Js 4 MVC - Add Listener to Image in a grid panel

15 Jan 2013, 6:52 PM
I was wondering how to add a listener to an image that is displaying in a grid panel. I am not sure how to implement the click event on an image from the renderer function of a column. I would like to add an onclick event to the images. Should that be done in this view or the controller? I am a newbie and a little lost. Thanks.

Ext.define('MyApp.view.people.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.myList',
requires: [

id: 'myGrid',

title: 'All People',

initComponent: function() {

var imagesUrl =/'+MyApp.util.Globals.projectName+'/'+MyApp.util.Globals.imageFolder;

this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: '[email protected]', myVal: 1},
{name: 'Tommy', email: '[email protected]',myVal: 2}

this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1},
{header: '', dataIndex: 'myVal',
renderer: function() {
return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />');
{header: '', dataIndex: 'myVal',
renderer: function() {
return '<img src="'+imagesUrl+'/book.png" alt="Lesson Study"/>';
{header: '', dataIndex: 'myVal',
renderer: function(){

var imageTmpl = Ext.create('MyApp.util.ImageTmpl');


return imageTmpl;


17 Jan 2013, 9:08 AM
Why not use an action column instead?

29 Jan 2013, 6:24 AM
I have the same question but instead of a grid I have an image map with several links in my View. Should the listeners be in the View or Controller?