I am trying an example for Ext.grid.Grid
from extJS
docs. I am unable to figure out why the tpl
is also showing div
element also as text.
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.Grid', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
tpl: '{firstname} {lastname}'
}, {
xtype: 'templatecolumn',
text: 'Department (Yrs)',
tpl: '<div class="test">{department} {seniority}</div>'
}],
height: 200,
width: 300,
renderTo: Ext.getBody()
});
Output
I am expecting <div class="test">
shouldn't show. Am I missing something here?
In modern toolkit, cell content is html-encoded by default. For your case, you need to set cell's encodeHtml config to false:
{
xtype: 'templatecolumn',
text: 'Department (Yrs)',
tpl: '<div class="test">{department} {seniority}</div>',
cell: {
encodeHtml: false
}
}