ExtJS Grid Cell Rendered with Mixed Image and Text

Rendering

To render mixed image and text in ExtJS grid, I found the following two approaches

• Implement custom renderer, return a value like this 

      <img src="..."/>you text content

• Use CSS to add background image to the cell (see Reference)

Problem: misaligned columns in the first approach

However, when I examine a grid with "locked" columns, I starting to see problem in the first implementation. Often times, the locked columns and floating columns are misaligned. Turns out image tag in the cell will cause grid to adjust row hight. However, ExtJS does not adjust fixed columns and floating columns together. So, if there is image in fixed column only, it will frequently make it taller than the floating columns, thus causing misalignment. To solve this problem, I added the following style to the image tag:

   margin-top: -4px;

   margin-bottom: -4px;

Event Handling

The image in the cell is usually an active component. In order to intercept the click event, I found two good approaches, again.

• In JS code, hookup event handlers to the image component, and fire event from there. Refer to implementation of ActionColumn (ExtJS source grid\column\Action.js)
• Change the selType of grid to 'cellmodel', and add select event listener

Reference

Displaying an Image Inside an Ext JS GridPanel Cell http://miamicoder.com/2009/displaying-an-image-inside-an-ext-js-gridpanel-cell-part-2/