RenderingTo render mixed image and text in ExtJS grid, I found the following two approaches
- Implement custom renderer, return a value like this
- 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:
Event HandlingThe 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