title: Ext Js 4 MVC Add Listener to Image in Grid Panel
body: <p>I would like to display an image in a grid panel and fire a click event when the user clicks on the image. I don't have a problem displaying an image. The problem I have is I am not sure how to add the listener to the image. Any help would be greatly appreciated? Really unsure what to do next. Thanks.</p>
  
  <pre><code>Ext.define('MyApp.view.people.List' ,{
  extend: 'Ext.grid.Panel',
  alias: 'widget.myList',
  requires: [
      'MyApp.util.Globals',
      'MyApp.util.ImageTmpl'
  ],
  
  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: 'ed@sencha.com', myVal: 1},
              {name: 'Tommy', email: 'tommy@sencha.com',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('&lt;img src="'+imagesUrl+'/edit.png" /&gt;');
              }
          },
          {header: '', dataIndex: 'myVal',
              renderer: function() {
                  return '&lt;img src="'+imagesUrl+'/book.png" alt="Lesson Study"/&gt;';
              }
          },
          {header: '', dataIndex: 'myVal',
              renderer: function(){
  
                  var imageTmpl = Ext.create('MyApp.util.ImageTmpl');
  
                  console.log(imageTmpl);
  
                  return imageTmpl;
              }
          }
      ];
  
      this.callParent(arguments);
  }
  </code></pre>
  
  <p>});</p>