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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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> * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
  20  * {@link Ext.data.Model#persistenceProperty data} using a {@link #tpl configured}
  21  * {@link Ext.XTemplate XTemplate}.
  22  *
  23  *     @example
  24  *     Ext.create('Ext.data.Store', {
  25  *         storeId:'employeeStore',
  26  *         fields:['firstname', 'lastname', 'senority', 'department'],
  27  *         groupField: 'department',
  28  *         data:[
  29  *             { firstname: &quot;Michael&quot;, lastname: &quot;Scott&quot;,   senority: 7, department: &quot;Manangement&quot; },
  30  *             { firstname: &quot;Dwight&quot;,  lastname: &quot;Schrute&quot;, senority: 2, department: &quot;Sales&quot; },
  31  *             { firstname: &quot;Jim&quot;,     lastname: &quot;Halpert&quot;, senority: 3, department: &quot;Sales&quot; },
  32  *             { firstname: &quot;Kevin&quot;,   lastname: &quot;Malone&quot;,  senority: 4, department: &quot;Accounting&quot; },
  33  *             { firstname: &quot;Angela&quot;,  lastname: &quot;Martin&quot;,  senority: 5, department: &quot;Accounting&quot; }
  34  *         ]
  35  *     });
  36  *
  37  *     Ext.create('Ext.grid.Panel', {
  38  *         title: 'Column Template Demo',
  39  *         store: Ext.data.StoreManager.lookup('employeeStore'),
  40  *         columns: [
  41  *             { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
  42  *             { text: 'Deparment (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({senority})' }
  43  *         ],
  44  *         height: 200,
  45  *         width: 300,
  46  *         renderTo: Ext.getBody()
  47  *     });
  48  */
  49 Ext.define('Ext.grid.column.Template', {
  50     extend: 'Ext.grid.column.Column',
  51     alias: ['widget.templatecolumn'],
  52     requires: ['Ext.XTemplate'],
  53     alternateClassName: 'Ext.grid.TemplateColumn',
  54
  55 <span id='Ext-grid-column-Template-cfg-tpl'>    /**
  56 </span>     * @cfg {String/Ext.XTemplate} tpl
  57      * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a
  58      * {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a
  59      * column's rendered value.
  60      */
  61
  62     constructor: function(cfg){
  63         var me = this,
  64             tpl;
  65
  66         me.callParent(arguments);
  67         tpl = me.tpl = (!Ext.isPrimitive(me.tpl) &amp;&amp; me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
  68
  69         me.renderer = function(value, p, record) {
  70             var data = Ext.apply({}, record.data, record.getAssociatedData());
  71             return tpl.apply(data);
  72         };
  73     }
  74 });
  75 </pre>
  76 </body>
  77 </html>