View Full Version : Rendering conditional statement on grid templatecolumn [ExtJS 4.2.1]

8 Feb 2014, 7:56 PM
I have been successfully rendering conditional statement on normal grid column

header: '&nbsp',
dataIndex: 'status_b2',
menuDisabled: true,
flex: 1,
sortable: false,
renderer : function(value, meta) {
var status = value.split("<br/>")[0];
if (status == "Unset Price"){
meta.style = "background-color:pink;";}
else if (status == "Available"){
meta.style = "background-color:green;";}
else if (status == "Booked Unpaid"){
meta.style = "background-color:yellow;";}
else if (status == "Booked Paid"){
meta.style = "background-color:orange;";}
else if (status == "Checked In"){
meta.style = "background-color:red;";}
else if (status == "Checked Out"){
meta.style = "background-color:purple;";}
return value;

My question is how to render with conditional logic on templatecolumn grid? If the room_status == "Dirty", I want to add background-color as red.

text: 'Room List',
xtype: 'templatecolumn',
tpl: 'ROOM {room_number} <br/> {room_type_name} <br/> {bed_type} | {room_status}',
menuDisabled: true,
flex: 1,
sortable: false

9 Feb 2014, 4:04 AM
I'm not sure you can access the meta for a TemplateColumn.

Take a look at the source to TemplateColumn, it's only a handful of lines. You could trivially implement your own version that does what you need.

9 Feb 2014, 7:06 AM
Hello ,
Please look into this work around execution, I hope this will meet your requirement.

Ext.create('Ext.data.Store', { storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
department: "Management"
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
department: "Sales"
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
department: "Sales"
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
department: "Accounting"
}, {
firstname: "Angela",
lastname: "Martin",
seniority: 5,
department: "Accounting"

Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
xtype: 'templatecolumn',
tpl: '{firstname} {lastname}',
flex: 1,
renderer: function(a, b, record) {
if(record.data.seniority == 5)
return '<span style = "background-color:#ff0000">record.data.firstname </span>'; // build your custom template here
return '<span>record.data.firstname </span>'
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{department} ({seniority})'
height: 200,
width: 300,
renderTo: Ext.getBody()