Custom rendering of grid cells with TemplateColumns

1. Now we have the Model and Store in place. We can create a basic grid panel that is
bound to our invoiceStore. This grid has columns defined for four of the Model's
fields: Client, Date, Amount, and Status:
Ext.create('Ext.grid.Panel', {
title: 'Chapter 8 - Grids',
height: 300,
width: 600,
store: invoiceStore,
columns: [{
header: 'Client',
dataIndex: 'Client'
}, {
header: 'Date',
dataIndex: 'Date'
}, {
header: 'Amount',
dataIndex: 'Amount'
}, {
header: 'Status',
dataIndex: 'Status'
}]
});

2. Now we have our basic structure in place we can define the Client column as an
Ext.grid.column.Template column. We do this by adding an xtype to its
column definition and giving it the value templatecolumn:
...
xtype: 'templatecolumn',
...

3. We can add the tpl configuration option and assign it a string containing
our template. We will simply display the client's value and then the invoice's
description in a span under it. We are also going to add a QuickTip to it in case
it is too long for the cell to contain:
{
xtype: 'templatecolumn',
header: 'Client',
dataIndex: 'Client',
tpl: '{Client}
{Description}'
}

4. Finally, we'll add a quick CSS style to make it look a bit better:
.description {
color: #666;
font-size: 0.9em;
margin-top: 4px;
}

1. As before, we start by adding the Ext.grid.column.Template column's xtype
(templatecolumn) to the column.
2. Our next step is to assign the tpl option an Ext.XTemplate object and define the
template string itself:
...
tpl: new Ext.XTemplate(
'{Amount}',
'{Currency}'
)
...
3. If you view this you will see the Currency field showing but our Amount field is not
showing two decimal places. We can fix this by adding a formatting function as part of
our Ext.XTemplate (as we have done in previous chapters) and use this to format
our float:
tpl: new Ext.XTemplate(
'{Amount:this.formatAmount}',
'{Currency}', {
formatAmount: function(val){
return val.toFixed(2);
}
)
4. As in the first example, we will add some CSS styling to format our currency type and
the outcome can be seen in the following screenshot: