<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-grid-column-Template'>/**
</span> * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
* {@link Ext.data.Model#persistenceProperty data} using a {@link #tpl configured}
* {@link Ext.XTemplate XTemplate}.
*
* @example
* 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 },
* { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
* ],
* height: 200,
* width: 300,
* renderTo: Ext.getBody()
* });
*/
Ext.define('Ext.grid.column.Template', {
extend: 'Ext.grid.column.Column',
alias: ['widget.templatecolumn'],
requires: ['Ext.XTemplate'],
alternateClassName: 'Ext.grid.TemplateColumn',
<span id='Ext-grid-column-Template-cfg-tpl'> /**
</span> * @cfg {String/Ext.XTemplate} tpl
* An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a
* {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a
* column's rendered value.
*/
<span id='Ext-grid-column-Template-cfg-renderer'> /**
</span> * @cfg renderer
* @hide
*/
<span id='Ext-grid-column-Template-cfg-scope'> /**
</span> * @cfg scope
* @hide
*/
initComponent: function(){
var me = this;
me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : new Ext.XTemplate(me.tpl);
// Set this here since the template may access any record values,
// so we must always run the update for this column
me.hasCustomRenderer = true;
me.callParent(arguments);
},
defaultRenderer: function(value, meta, record) {
var data = Ext.apply({}, record.data, record.getAssociatedData());
return this.tpl.apply(data);
}
});
</pre>
</body>
</html>