Template2.html 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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', 'seniority', 'department'],
  27. * groupField: 'department',
  28. * data:[
  29. * { firstname: &quot;Michael&quot;, lastname: &quot;Scott&quot;, seniority: 7, department: &quot;Management&quot; },
  30. * { firstname: &quot;Dwight&quot;, lastname: &quot;Schrute&quot;, seniority: 2, department: &quot;Sales&quot; },
  31. * { firstname: &quot;Jim&quot;, lastname: &quot;Halpert&quot;, seniority: 3, department: &quot;Sales&quot; },
  32. * { firstname: &quot;Kevin&quot;, lastname: &quot;Malone&quot;, seniority: 4, department: &quot;Accounting&quot; },
  33. * { firstname: &quot;Angela&quot;, lastname: &quot;Martin&quot;, seniority: 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: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
  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. <span id='Ext-grid-column-Template-cfg-tpl'> /**
  55. </span> * @cfg {String/Ext.XTemplate} tpl
  56. * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a
  57. * {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a
  58. * column's rendered value.
  59. */
  60. <span id='Ext-grid-column-Template-cfg-renderer'> /**
  61. </span> * @cfg renderer
  62. * @hide
  63. */
  64. <span id='Ext-grid-column-Template-cfg-scope'> /**
  65. </span> * @cfg scope
  66. * @hide
  67. */
  68. initComponent: function(){
  69. var me = this;
  70. me.tpl = (!Ext.isPrimitive(me.tpl) &amp;&amp; me.tpl.compile) ? me.tpl : new Ext.XTemplate(me.tpl);
  71. // Set this here since the template may access any record values,
  72. // so we must always run the update for this column
  73. me.hasCustomRenderer = true;
  74. me.callParent(arguments);
  75. },
  76. defaultRenderer: function(value, meta, record) {
  77. var data = Ext.apply({}, record.data, record.getAssociatedData());
  78. return this.tpl.apply(data);
  79. }
  80. });
  81. </pre>
  82. </body>
  83. </html>