123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-Template'>/**
- </span> * Represents an HTML fragment template. Templates may be {@link #compile precompiled} for greater performance.
- *
- * An instance of this class may be created by passing to the constructor either a single argument, or multiple
- * arguments:
- *
- * # Single argument: String/Array
- *
- * The single argument may be either a String or an Array:
- *
- * - String:
- *
- * var t = new Ext.Template("<div>Hello {0}.</div>");
- * t.{@link #append}('some-element', ['foo']);
- *
- * - Array:
- *
- * An Array will be combined with `join('')`.
- *
- * var t = new Ext.Template([
- * '<div name="{id}">',
- * '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
- * '</div>',
- * ]);
- * t.{@link #compile}();
- * t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
- *
- * # Multiple arguments: String, Object, Array, ...
- *
- * Multiple arguments will be combined with `join('')`.
- *
- * var t = new Ext.Template(
- * '<div name="{id}">',
- * '<span class="{cls}">{name} {value}</span>',
- * '</div>',
- * // a configuration object:
- * {
- * compiled: true, // {@link #compile} immediately
- * }
- * );
- *
- * # Notes
- *
- * - For a list of available format functions, see {@link Ext.util.Format}.
- * - `disableFormats` reduces `{@link #apply}` time when no formatting is required.
- */
- Ext.define('Ext.Template', {
- /* Begin Definitions */
- requires: ['Ext.dom.Helper', 'Ext.util.Format'],
- inheritableStatics: {
- <span id='Ext-Template-static-method-from'> /**
- </span> * Creates a template from the passed element's value (_display:none_ textarea, preferred) or innerHTML.
- * @param {String/HTMLElement} el A DOM element or its id
- * @param {Object} config (optional) Config object
- * @return {Ext.Template} The created template
- * @static
- * @inheritable
- */
- from: function(el, config) {
- el = Ext.getDom(el);
- return new this(el.value || el.innerHTML, config || '');
- }
- },
- /* End Definitions */
- <span id='Ext-Template-method-constructor'> /**
- </span> * Creates new template.
- *
- * @param {String...} html List of strings to be concatenated into template.
- * Alternatively an array of strings can be given, but then no config object may be passed.
- * @param {Object} config (optional) Config object
- */
- constructor: function(html) {
- var me = this,
- args = arguments,
- buffer = [],
- i = 0,
- length = args.length,
- value;
- me.initialConfig = {};
-
- // Allow an array to be passed here so we can
- // pass an array of strings and an object
- // at the end
- if (length === 1 && Ext.isArray(html)) {
- args = html;
- length = args.length;
- }
- if (length > 1) {
- for (; i < length; i++) {
- value = args[i];
- if (typeof value == 'object') {
- Ext.apply(me.initialConfig, value);
- Ext.apply(me, value);
- } else {
- buffer.push(value);
- }
- }
- } else {
- buffer.push(html);
- }
- // @private
- me.html = buffer.join('');
- if (me.compiled) {
- me.compile();
- }
- },
- <span id='Ext-Template-property-isTemplate'> /**
- </span> * @property {Boolean} isTemplate
- * `true` in this class to identify an object as an instantiated Template, or subclass thereof.
- */
- isTemplate: true,
- <span id='Ext-Template-cfg-compiled'> /**
- </span> * @cfg {Boolean} compiled
- * True to immediately compile the template. Defaults to false.
- */
- <span id='Ext-Template-cfg-disableFormats'> /**
- </span> * @cfg {Boolean} disableFormats
- * True to disable format functions in the template. If the template doesn't contain
- * format functions, setting disableFormats to true will reduce apply time. Defaults to false.
- */
- disableFormats: false,
- re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
- <span id='Ext-Template-method-apply'> /**
- </span> * Returns an HTML fragment of this template with the specified values applied.
- *
- * @param {Object/Array} values The template values. Can be an array if your params are numeric:
- *
- * var tpl = new Ext.Template('Name: {0}, Age: {1}');
- * tpl.apply(['John', 25]);
- *
- * or an object:
- *
- * var tpl = new Ext.Template('Name: {name}, Age: {age}');
- * tpl.apply({name: 'John', age: 25});
- *
- * @return {String} The HTML fragment
- */
- apply: function(values) {
- var me = this,
- useFormat = me.disableFormats !== true,
- fm = Ext.util.Format,
- tpl = me,
- ret;
- if (me.compiled) {
- return me.compiled(values).join('');
- }
- function fn(m, name, format, args) {
- if (format && useFormat) {
- if (args) {
- args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
- } else {
- args = [values[name]];
- }
- if (format.substr(0, 5) == "this.") {
- return tpl[format.substr(5)].apply(tpl, args);
- }
- else {
- return fm[format].apply(fm, args);
- }
- }
- else {
- return values[name] !== undefined ? values[name] : "";
- }
- }
- ret = me.html.replace(me.re, fn);
- return ret;
- },
- <span id='Ext-Template-method-applyOut'> /**
- </span> * Appends the result of this template to the provided output array.
- * @param {Object/Array} values The template values. See {@link #apply}.
- * @param {Array} out The array to which output is pushed.
- * @return {Array} The given out array.
- */
- applyOut: function(values, out) {
- var me = this;
- if (me.compiled) {
- out.push.apply(out, me.compiled(values));
- } else {
- out.push(me.apply(values));
- }
- return out;
- },
- <span id='Ext-Template-method-applyTemplate'> /**
- </span> * @method applyTemplate
- * @member Ext.Template
- * Alias for {@link #apply}.
- * @inheritdoc Ext.Template#apply
- */
- applyTemplate: function () {
- return this.apply.apply(this, arguments);
- },
- <span id='Ext-Template-method-set'> /**
- </span> * Sets the HTML used as the template and optionally compiles it.
- * @param {String} html
- * @param {Boolean} compile (optional) True to compile the template.
- * @return {Ext.Template} this
- */
- set: function(html, compile) {
- var me = this;
- me.html = html;
- me.compiled = null;
- return compile ? me.compile() : me;
- },
- compileARe: /\\/g,
- compileBRe: /(\r\n|\n)/g,
- compileCRe: /'/g,
- <span id='Ext-Template-method-compile'> /**
- </span> * Compiles the template into an internal function, eliminating the RegEx overhead.
- * @return {Ext.Template} this
- */
- compile: function() {
- var me = this,
- fm = Ext.util.Format,
- useFormat = me.disableFormats !== true,
- body, bodyReturn;
- function fn(m, name, format, args) {
- if (format && useFormat) {
- args = args ? ',' + args: "";
- if (format.substr(0, 5) != "this.") {
- format = "fm." + format + '(';
- }
- else {
- format = 'this.' + format.substr(5) + '(';
- }
- }
- else {
- args = '';
- format = "(values['" + name + "'] == undefined ? '' : ";
- }
- return "'," + format + "values['" + name + "']" + args + ") ,'";
- }
- bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn);
- body = "this.compiled = function(values){ return ['" + bodyReturn + "'];};";
- eval(body);
- return me;
- },
- <span id='Ext-Template-method-insertFirst'> /**
- </span> * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
- *
- * @param {String/HTMLElement/Ext.Element} el The context element
- * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
- * @param {Boolean} returnElement (optional) true to return a Ext.Element.
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertFirst: function(el, values, returnElement) {
- return this.doInsert('afterBegin', el, values, returnElement);
- },
- <span id='Ext-Template-method-insertBefore'> /**
- </span> * Applies the supplied values to the template and inserts the new node(s) before el.
- *
- * @param {String/HTMLElement/Ext.Element} el The context element
- * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
- * @param {Boolean} returnElement (optional) true to return a Ext.Element.
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertBefore: function(el, values, returnElement) {
- return this.doInsert('beforeBegin', el, values, returnElement);
- },
- <span id='Ext-Template-method-insertAfter'> /**
- </span> * Applies the supplied values to the template and inserts the new node(s) after el.
- *
- * @param {String/HTMLElement/Ext.Element} el The context element
- * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
- * @param {Boolean} returnElement (optional) true to return a Ext.Element.
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertAfter: function(el, values, returnElement) {
- return this.doInsert('afterEnd', el, values, returnElement);
- },
- <span id='Ext-Template-method-append'> /**
- </span> * Applies the supplied `values` to the template and appends the new node(s) to the specified `el`.
- *
- * For example usage see {@link Ext.Template Ext.Template class docs}.
- *
- * @param {String/HTMLElement/Ext.Element} el The context element
- * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
- * @param {Boolean} returnElement (optional) true to return an Ext.Element.
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- append: function(el, values, returnElement) {
- return this.doInsert('beforeEnd', el, values, returnElement);
- },
- doInsert: function(where, el, values, returnElement) {
- var newNode = Ext.DomHelper.insertHtml(where, Ext.getDom(el), this.apply(values));
- return returnElement ? Ext.get(newNode) : newNode;
- },
- <span id='Ext-Template-method-overwrite'> /**
- </span> * Applies the supplied values to the template and overwrites the content of el with the new node(s).
- *
- * @param {String/HTMLElement/Ext.Element} el The context element
- * @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
- * @param {Boolean} returnElement (optional) true to return a Ext.Element.
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- overwrite: function(el, values, returnElement) {
- var newNode = Ext.DomHelper.overwrite(Ext.getDom(el), this.apply(values));
- return returnElement ? Ext.get(newNode) : newNode;
- }
- });
- </pre>
- </body>
- </html>
|