docs/source/Template.html

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