docs/source/Template.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.column.Template'>/**
   2 </span> * @class Ext.grid.column.Template
   3  * @extends Ext.grid.column.Column
   4  *
   5  * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
   6  * {@link Ext.data.Model#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
   7  *
   8  *  {@img Ext.grid.column.Template/Ext.grid.column.Template.png Ext.grid.column.Template grid column}
   9  *
  10  * ## Code
  11  *     Ext.create('Ext.data.Store', {
  12  *         storeId:'employeeStore',
  13  *         fields:['firstname', 'lastname', 'senority', 'department'],
  14  *         groupField: 'department',
  15  *         data:[
  16  *             {firstname:&quot;Michael&quot;, lastname:&quot;Scott&quot;, senority:7, department:&quot;Manangement&quot;},
  17  *             {firstname:&quot;Dwight&quot;, lastname:&quot;Schrute&quot;, senority:2, department:&quot;Sales&quot;},
  18  *             {firstname:&quot;Jim&quot;, lastname:&quot;Halpert&quot;, senority:3, department:&quot;Sales&quot;},
  19  *             {firstname:&quot;Kevin&quot;, lastname:&quot;Malone&quot;, senority:4, department:&quot;Accounting&quot;},
  20  *             {firstname:&quot;Angela&quot;, lastname:&quot;Martin&quot;, senority:5, department:&quot;Accounting&quot;}
  21  *         ]
  22  *     });
  23  *
  24  *     Ext.create('Ext.grid.Panel', {
  25  *         title: 'Column Template Demo',
  26  *         store: Ext.data.StoreManager.lookup('employeeStore'),
  27  *         columns: [
  28  *             {text: 'Full Name',  xtype:'templatecolumn', tpl:'{firstname} {lastname}', flex:1},
  29  *             {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{department} ({senority})'}
  30  *         ],
  31  *         height: 200,
  32  *         width: 300,
  33  *         renderTo: Ext.getBody()
  34  *     });
  35  *
  36  * @markdown
  37  * @xtype templatecolumn
  38  */
  39 Ext.define('Ext.grid.column.Template', {
  40     extend: 'Ext.grid.column.Column',
  41     alias: ['widget.templatecolumn'],
  42     requires: ['Ext.XTemplate'],
  43     alternateClassName: 'Ext.grid.TemplateColumn',
  44
  45 <span id='Ext-grid.column.Template-cfg-tpl'>    /**
  46 </span>     * @cfg {String/XTemplate} tpl
  47      * An {@link Ext.XTemplate XTemplate}, or an XTemplate &lt;i&gt;definition string&lt;/i&gt; to use to process a
  48      * {@link Ext.data.Model Model}'s {@link Ext.data.Model#data data} to produce a column's rendered value.
  49      */
  50     constructor: function(cfg){
  51         var me = this,
  52             tpl;
  53
  54         me.callParent(arguments);
  55         tpl = me.tpl = (!Ext.isPrimitive(me.tpl) &amp;&amp; me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
  56
  57         me.renderer = function(value, p, record) {
  58             var data = Ext.apply({}, record.data, record.getAssociatedData());
  59             return tpl.apply(data);
  60         };
  61     }
  62 });
  63 </pre></pre></body></html>