Event handling on images rendered in gridPanel

The handler function for an item can be used to write the mouseclick event logic.

columns: [ 
              {
                  xtype:'actioncolumn',
                  header: "Action",
                  width:55,
                  items: [{
                            icon:'{!$Resource.Images}/Image.png',
                            tooltip: 'Configure Kit',
                            id:'ImageId',
                            style: {
                                 marginLeft: '5px'
                            },

                            handler: function(grid, rowIndex, colIndex) {
                               var rec = grid.getStore().getAt(rowIndex);

                                // Do the click event logic here 

                            } 
                                    
                  }] 
         ]  

Rendering an Image in Extjs gridPanel

 xtype:'actioncolumn' can be defined in a column.

 icon : Provide the url for the image.

 You can add tooltip and style to it. 

columns: [ 
                        {
                            xtype:'actioncolumn',
                            header: "Action",
                            width:55,
                            items: [{
                                        icon:'{!$Resource.Images}/Image.png',
                                        tooltip: 'Configure Kit',
                                        id:'ImageId',
                                        style: {
                                            marginLeft: '5px'
                                        },
                                                                                
                                    }                                    
                            ] 
                         }

]