JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">
JavaScript
Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.create('Ext.data.Store', {
data: [{
id: 1,
name: 'Albert',
operation1: {
startdate: '2011-10-26',
enddate: '2011-11-25'
},
operation2: {}
}],
fields: ['id', 'name', 'operation1', 'operation2']
}),
columns: [{
header:'Start Date',
xtype:'templatecolumn',
tpl:'<span>{operation1.startdate}</span>',
align:'center',
flex: 1
},{
header:'End Date',
xtype:'templatecolumn',
tpl:'<span>{operation2.enddate}</span>',
align:'center',
flex: 1
}],
height: 200,
width: 300,
renderTo: Ext.getBody()
});