Ext JS 6 Modern Set Field Renderer in itemTpl

In Ext Js 6 Modern (or Sencha Touch), if Ext.grid.plugin.RowExpander plugin is enabled for Ext.grid.Grid, there will be a expander icon (plus icon) at left side of each row. Clicking the expander icon will expand the selected row, and more detail will be displayed. This detail page can be set by itemConfig.body.tpl option.

 

Like following code

 

And the tpl option is actually XTemplate, so the above code can be written as following form as well:

 

Note that here¬†XTemplate cannot be replaced by Template class (using Template will display raw literal value¬†as {…})

 

 

To use a renderer function for field in the template string, we need add a member function to the template

Then the template can be changed like this