Ext Grid Renderer Danger

Well, not a real danger. You won't get hurt if you use a renderer even if you use it wrongly. Nevertheless, renderers can introduce unexpected behavior that is not easy to fix what can cause frustrations and upsets or increased development time, at least. Let's see what we need to know to avoid that.

What is a renderer?

renderer is a function called by Ext for each cell in a grid column to generate the HTML markup for that cell.

Renderer function is call with arguments that are described in detail in the documentation. We take just first three for the demonstration. They are:

• value - raw value from the underlying record
• meta - the object used for adding a css or attributes to the grid cell
• record - the record being processed

The default renderer only returns value and grids can work happily without a configured renderer in many cases.

However, we can use the value and data from other fields of the record to change how the value is displayed or we can even derive a new value from the existing data in the record. Renderers can also be used for conditional highlighting of cells, make some font bold or other color or even to define cell tooltips.

Example

In this example I will first demonstrate problems introduced by incorrect use of renderers and then the solution of these problems. The grids use actors database from http://themoviedb.org. Grids pull ~1000 records with the following structure:

We want to display the following columns:

• First Name
• Last Name
• Full Name
• Birthday
• Age
• Photo

Obviously, we do not have all data in the received JSON; full name is missing but we have first and last name so we can concatenate, age is missing but we have birthday so we can calculate the difference between today and the birthday and we can calculate the full img src from the profile path. So we configure our renderers as follows:

Go back and read the comments in the above code...

The problematic grid

Open grids in new window

The problems:

1. Try to sort by (full) Name. The grid does not sort by full name but by last name.
2. Try to sort by Age ascending (using the column menu). You can see that the sort is descending in fact.
3. Try to search for "Tom". Tom Hanks and Tom Cruise are not found.

Why all this? The single origin of the above problems is that we use renderers to derive new data from the existing data. Grid is just a view, all sorting and filtering is done in the store but store does not have full name and age.

The working grid

Every problem has a solution so has this. Try the same actions in the following grid that works as expected. Finds Hanks and Cruise and sorts the correct direction.Open grids in new window

The solution

    The general rule is:

Never ever use renderers to derive new data from the existing data. Use them only for user interface embellishment.

  Thus, we need to create the missing data elsewhere. Where? In the model.

Now we only need to point dataIndex of Name and Age to the new model fields and we are done. Of course, the tooltip and name link renderers stay, but they are UI renderers, not data creation renderers.     The general rule is:

Never ever use renderers to derive new data from the existing data. Use them only for user interface embellishment.

  Thus, we need to create the missing data elsewhere. Where? In the model.

Now we only need to point dataIndex of Name and Age to the new model fields and we are done. Of course, the tooltip and name link renderers stay, but they are UI renderers, not data creation renderers.