Template.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  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-Template'>/**
  19. </span> * Represents an HTML fragment template. Templates may be {@link #compile precompiled} for greater performance.
  20. *
  21. * An instance of this class may be created by passing to the constructor either a single argument, or multiple
  22. * arguments:
  23. *
  24. * # Single argument: String/Array
  25. *
  26. * The single argument may be either a String or an Array:
  27. *
  28. * - String:
  29. *
  30. * var t = new Ext.Template(&quot;&lt;div&gt;Hello {0}.&lt;/div&gt;&quot;);
  31. * t.{@link #append}('some-element', ['foo']);
  32. *
  33. * - Array:
  34. *
  35. * An Array will be combined with `join('')`.
  36. *
  37. * var t = new Ext.Template([
  38. * '&lt;div name=&quot;{id}&quot;&gt;',
  39. * '&lt;span class=&quot;{cls}&quot;&gt;{name:trim} {value:ellipsis(10)}&lt;/span&gt;',
  40. * '&lt;/div&gt;',
  41. * ]);
  42. * t.{@link #compile}();
  43. * t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  44. *
  45. * # Multiple arguments: String, Object, Array, ...
  46. *
  47. * Multiple arguments will be combined with `join('')`.
  48. *
  49. * var t = new Ext.Template(
  50. * '&lt;div name=&quot;{id}&quot;&gt;',
  51. * '&lt;span class=&quot;{cls}&quot;&gt;{name} {value}&lt;/span&gt;',
  52. * '&lt;/div&gt;',
  53. * // a configuration object:
  54. * {
  55. * compiled: true, // {@link #compile} immediately
  56. * }
  57. * );
  58. *
  59. * # Notes
  60. *
  61. * - For a list of available format functions, see {@link Ext.util.Format}.
  62. * - `disableFormats` reduces `{@link #apply}` time when no formatting is required.
  63. */
  64. Ext.define('Ext.Template', {
  65. /* Begin Definitions */
  66. requires: ['Ext.dom.Helper', 'Ext.util.Format'],
  67. inheritableStatics: {
  68. <span id='Ext-Template-static-method-from'> /**
  69. </span> * Creates a template from the passed element's value (_display:none_ textarea, preferred) or innerHTML.
  70. * @param {String/HTMLElement} el A DOM element or its id
  71. * @param {Object} config (optional) Config object
  72. * @return {Ext.Template} The created template
  73. * @static
  74. * @inheritable
  75. */
  76. from: function(el, config) {
  77. el = Ext.getDom(el);
  78. return new this(el.value || el.innerHTML, config || '');
  79. }
  80. },
  81. /* End Definitions */
  82. <span id='Ext-Template-method-constructor'> /**
  83. </span> * Creates new template.
  84. *
  85. * @param {String...} html List of strings to be concatenated into template.
  86. * Alternatively an array of strings can be given, but then no config object may be passed.
  87. * @param {Object} config (optional) Config object
  88. */
  89. constructor: function(html) {
  90. var me = this,
  91. args = arguments,
  92. buffer = [],
  93. i = 0,
  94. length = args.length,
  95. value;
  96. me.initialConfig = {};
  97. // Allow an array to be passed here so we can
  98. // pass an array of strings and an object
  99. // at the end
  100. if (length === 1 &amp;&amp; Ext.isArray(html)) {
  101. args = html;
  102. length = args.length;
  103. }
  104. if (length &gt; 1) {
  105. for (; i &lt; length; i++) {
  106. value = args[i];
  107. if (typeof value == 'object') {
  108. Ext.apply(me.initialConfig, value);
  109. Ext.apply(me, value);
  110. } else {
  111. buffer.push(value);
  112. }
  113. }
  114. } else {
  115. buffer.push(html);
  116. }
  117. // @private
  118. me.html = buffer.join('');
  119. if (me.compiled) {
  120. me.compile();
  121. }
  122. },
  123. <span id='Ext-Template-property-isTemplate'> /**
  124. </span> * @property {Boolean} isTemplate
  125. * `true` in this class to identify an object as an instantiated Template, or subclass thereof.
  126. */
  127. isTemplate: true,
  128. <span id='Ext-Template-cfg-compiled'> /**
  129. </span> * @cfg {Boolean} compiled
  130. * True to immediately compile the template. Defaults to false.
  131. */
  132. <span id='Ext-Template-cfg-disableFormats'> /**
  133. </span> * @cfg {Boolean} disableFormats
  134. * True to disable format functions in the template. If the template doesn't contain
  135. * format functions, setting disableFormats to true will reduce apply time. Defaults to false.
  136. */
  137. disableFormats: false,
  138. re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
  139. <span id='Ext-Template-method-apply'> /**
  140. </span> * Returns an HTML fragment of this template with the specified values applied.
  141. *
  142. * @param {Object/Array} values The template values. Can be an array if your params are numeric:
  143. *
  144. * var tpl = new Ext.Template('Name: {0}, Age: {1}');
  145. * tpl.apply(['John', 25]);
  146. *
  147. * or an object:
  148. *
  149. * var tpl = new Ext.Template('Name: {name}, Age: {age}');
  150. * tpl.apply({name: 'John', age: 25});
  151. *
  152. * @return {String} The HTML fragment
  153. */
  154. apply: function(values) {
  155. var me = this,
  156. useFormat = me.disableFormats !== true,
  157. fm = Ext.util.Format,
  158. tpl = me,
  159. ret;
  160. if (me.compiled) {
  161. return me.compiled(values).join('');
  162. }
  163. function fn(m, name, format, args) {
  164. if (format &amp;&amp; useFormat) {
  165. if (args) {
  166. args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
  167. } else {
  168. args = [values[name]];
  169. }
  170. if (format.substr(0, 5) == &quot;this.&quot;) {
  171. return tpl[format.substr(5)].apply(tpl, args);
  172. }
  173. else {
  174. return fm[format].apply(fm, args);
  175. }
  176. }
  177. else {
  178. return values[name] !== undefined ? values[name] : &quot;&quot;;
  179. }
  180. }
  181. ret = me.html.replace(me.re, fn);
  182. return ret;
  183. },
  184. <span id='Ext-Template-method-applyOut'> /**
  185. </span> * Appends the result of this template to the provided output array.
  186. * @param {Object/Array} values The template values. See {@link #apply}.
  187. * @param {Array} out The array to which output is pushed.
  188. * @return {Array} The given out array.
  189. */
  190. applyOut: function(values, out) {
  191. var me = this;
  192. if (me.compiled) {
  193. out.push.apply(out, me.compiled(values));
  194. } else {
  195. out.push(me.apply(values));
  196. }
  197. return out;
  198. },
  199. <span id='Ext-Template-method-applyTemplate'> /**
  200. </span> * @method applyTemplate
  201. * @member Ext.Template
  202. * Alias for {@link #apply}.
  203. * @inheritdoc Ext.Template#apply
  204. */
  205. applyTemplate: function () {
  206. return this.apply.apply(this, arguments);
  207. },
  208. <span id='Ext-Template-method-set'> /**
  209. </span> * Sets the HTML used as the template and optionally compiles it.
  210. * @param {String} html
  211. * @param {Boolean} compile (optional) True to compile the template.
  212. * @return {Ext.Template} this
  213. */
  214. set: function(html, compile) {
  215. var me = this;
  216. me.html = html;
  217. me.compiled = null;
  218. return compile ? me.compile() : me;
  219. },
  220. compileARe: /\\/g,
  221. compileBRe: /(\r\n|\n)/g,
  222. compileCRe: /'/g,
  223. <span id='Ext-Template-method-compile'> /**
  224. </span> * Compiles the template into an internal function, eliminating the RegEx overhead.
  225. * @return {Ext.Template} this
  226. */
  227. compile: function() {
  228. var me = this,
  229. fm = Ext.util.Format,
  230. useFormat = me.disableFormats !== true,
  231. body, bodyReturn;
  232. function fn(m, name, format, args) {
  233. if (format &amp;&amp; useFormat) {
  234. args = args ? ',' + args: &quot;&quot;;
  235. if (format.substr(0, 5) != &quot;this.&quot;) {
  236. format = &quot;fm.&quot; + format + '(';
  237. }
  238. else {
  239. format = 'this.' + format.substr(5) + '(';
  240. }
  241. }
  242. else {
  243. args = '';
  244. format = &quot;(values['&quot; + name + &quot;'] == undefined ? '' : &quot;;
  245. }
  246. return &quot;',&quot; + format + &quot;values['&quot; + name + &quot;']&quot; + args + &quot;) ,'&quot;;
  247. }
  248. bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, &quot;\\'&quot;).replace(me.re, fn);
  249. body = &quot;this.compiled = function(values){ return ['&quot; + bodyReturn + &quot;'];};&quot;;
  250. eval(body);
  251. return me;
  252. },
  253. <span id='Ext-Template-method-insertFirst'> /**
  254. </span> * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
  255. *
  256. * @param {String/HTMLElement/Ext.Element} el The context element
  257. * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
  258. * @param {Boolean} returnElement (optional) true to return a Ext.Element.
  259. * @return {HTMLElement/Ext.Element} The new node or Element
  260. */
  261. insertFirst: function(el, values, returnElement) {
  262. return this.doInsert('afterBegin', el, values, returnElement);
  263. },
  264. <span id='Ext-Template-method-insertBefore'> /**
  265. </span> * Applies the supplied values to the template and inserts the new node(s) before el.
  266. *
  267. * @param {String/HTMLElement/Ext.Element} el The context element
  268. * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
  269. * @param {Boolean} returnElement (optional) true to return a Ext.Element.
  270. * @return {HTMLElement/Ext.Element} The new node or Element
  271. */
  272. insertBefore: function(el, values, returnElement) {
  273. return this.doInsert('beforeBegin', el, values, returnElement);
  274. },
  275. <span id='Ext-Template-method-insertAfter'> /**
  276. </span> * Applies the supplied values to the template and inserts the new node(s) after el.
  277. *
  278. * @param {String/HTMLElement/Ext.Element} el The context element
  279. * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
  280. * @param {Boolean} returnElement (optional) true to return a Ext.Element.
  281. * @return {HTMLElement/Ext.Element} The new node or Element
  282. */
  283. insertAfter: function(el, values, returnElement) {
  284. return this.doInsert('afterEnd', el, values, returnElement);
  285. },
  286. <span id='Ext-Template-method-append'> /**
  287. </span> * Applies the supplied `values` to the template and appends the new node(s) to the specified `el`.
  288. *
  289. * For example usage see {@link Ext.Template Ext.Template class docs}.
  290. *
  291. * @param {String/HTMLElement/Ext.Element} el The context element
  292. * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
  293. * @param {Boolean} returnElement (optional) true to return an Ext.Element.
  294. * @return {HTMLElement/Ext.Element} The new node or Element
  295. */
  296. append: function(el, values, returnElement) {
  297. return this.doInsert('beforeEnd', el, values, returnElement);
  298. },
  299. doInsert: function(where, el, values, returnElement) {
  300. var newNode = Ext.DomHelper.insertHtml(where, Ext.getDom(el), this.apply(values));
  301. return returnElement ? Ext.get(newNode) : newNode;
  302. },
  303. <span id='Ext-Template-method-overwrite'> /**
  304. </span> * Applies the supplied values to the template and overwrites the content of el with the new node(s).
  305. *
  306. * @param {String/HTMLElement/Ext.Element} el The context element
  307. * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
  308. * @param {Boolean} returnElement (optional) true to return a Ext.Element.
  309. * @return {HTMLElement/Ext.Element} The new node or Element
  310. */
  311. overwrite: function(el, values, returnElement) {
  312. var newNode = Ext.DomHelper.overwrite(Ext.getDom(el), this.apply(values));
  313. return returnElement ? Ext.get(newNode) : newNode;
  314. }
  315. });
  316. </pre>
  317. </body>
  318. </html>