/ext-4.1.0_b3/docs/source/AbstractHelper.html

https://bitbucket.org/srogerf/javascript · HTML · 311 lines · 280 code · 31 blank · 0 comment · 0 complexity · 0a142987076de70ae205b107029c5fa4 MD5 · raw file

  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-dom-AbstractHelper'>/**
  19. </span> * @class Ext.dom.AbstractHelper
  20. * @private
  21. * Abstract base class for {@link Ext.dom.Helper}.
  22. * @private
  23. */
  24. Ext.define('Ext.dom.AbstractHelper', {
  25. emptyTags : /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
  26. confRe : /tag|children|cn|html|tpl|tplData$/i,
  27. endRe : /end/i,
  28. attribXlat: { cls : 'class', htmlFor : 'for' },
  29. closeTags: {},
  30. decamelizeName : function () {
  31. var camelCaseRe = /([a-z])([A-Z])/g,
  32. cache = {};
  33. function decamel (match, p1, p2) {
  34. return p1 + '-' + p2.toLowerCase();
  35. }
  36. return function (s) {
  37. return cache[s] || (cache[s] = s.replace(camelCaseRe, decamel));
  38. };
  39. }(),
  40. generateMarkup: function(spec, buffer) {
  41. var me = this,
  42. attr, val, tag, i, closeTags;
  43. if (typeof spec == &quot;string&quot;) {
  44. buffer.push(spec);
  45. } else if (Ext.isArray(spec)) {
  46. for (i = 0; i &lt; spec.length; i++) {
  47. if (spec[i]) {
  48. me.generateMarkup(spec[i], buffer);
  49. }
  50. }
  51. } else {
  52. tag = spec.tag || 'div';
  53. buffer.push('&lt;', tag);
  54. for (attr in spec) {
  55. if (spec.hasOwnProperty(attr)) {
  56. val = spec[attr];
  57. if (!me.confRe.test(attr)) {
  58. if (typeof val == &quot;object&quot;) {
  59. buffer.push(' ', attr, '=&quot;');
  60. me.generateStyles(val, buffer).push('&quot;');
  61. } else {
  62. buffer.push(' ', me.attribXlat[attr] || attr, '=&quot;', val, '&quot;');
  63. }
  64. }
  65. }
  66. }
  67. // Now either just close the tag or try to add children and close the tag.
  68. if (me.emptyTags.test(tag)) {
  69. buffer.push('/&gt;');
  70. } else {
  71. buffer.push('&gt;');
  72. // Apply the tpl html, and cn specifications
  73. if ((val = spec.tpl)) {
  74. val.applyOut(spec.tplData, buffer);
  75. }
  76. if ((val = spec.html)) {
  77. buffer.push(val);
  78. }
  79. if ((val = spec.cn || spec.children)) {
  80. me.generateMarkup(val, buffer);
  81. }
  82. // we generate a lot of close tags, so cache them rather than push 3 parts
  83. closeTags = me.closeTags;
  84. buffer.push(closeTags[tag] || (closeTags[tag] = '&lt;/' + tag + '&gt;'));
  85. }
  86. }
  87. return buffer;
  88. },
  89. <span id='Ext-dom-AbstractHelper-method-generateStyles'> /**
  90. </span> * Converts the styles from the given object to text. The styles are CSS style names
  91. * with their associated value.
  92. *
  93. * The basic form of this method returns a string:
  94. *
  95. * var s = Ext.DomHelper.generateStyles({
  96. * backgroundColor: 'red'
  97. * });
  98. *
  99. * // s = 'background-color:red;'
  100. *
  101. * Alternatively, this method can append to an output array.
  102. *
  103. * var buf = [];
  104. *
  105. * ...
  106. *
  107. * Ext.DomHelper.generateStyles({
  108. * backgroundColor: 'red'
  109. * }, buf);
  110. *
  111. * In this case, the style text is pushed on to the array and the array is returned.
  112. *
  113. * @param {Object} styles The object describing the styles.
  114. * @param {String[]} [buffer] The output buffer.
  115. * @return {String/String[]} If buffer is passed, it is returned. Otherwise the style
  116. * string is returned.
  117. */
  118. generateStyles: function (styles, buffer) {
  119. var a = buffer || [],
  120. name;
  121. for (name in styles) {
  122. if (styles.hasOwnProperty(name)) {
  123. a.push(this.decamelizeName(name), ':', styles[name], ';');
  124. }
  125. }
  126. return buffer || a.join('');
  127. },
  128. <span id='Ext-dom-AbstractHelper-method-markup'> /**
  129. </span> * Returns the markup for the passed Element(s) config.
  130. * @param {Object} spec The DOM object spec (and children)
  131. * @return {String}
  132. */
  133. markup: function(spec) {
  134. if (typeof spec == &quot;string&quot;) {
  135. return spec;
  136. }
  137. var buf = this.generateMarkup(spec, []);
  138. return buf.join('');
  139. },
  140. <span id='Ext-dom-AbstractHelper-method-applyStyles'> /**
  141. </span> * Applies a style specification to an element.
  142. * @param {String/HTMLElement} el The element to apply styles to
  143. * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
  144. * a function which returns such a specification.
  145. */
  146. applyStyles: function(el, styles) {
  147. if (styles) {
  148. var i = 0,
  149. len,
  150. style;
  151. el = Ext.fly(el);
  152. if (typeof styles == 'function') {
  153. styles = styles.call();
  154. }
  155. if (typeof styles == 'string'){
  156. styles = Ext.util.Format.trim(styles).split(/\s*(?::|;)\s*/);
  157. for(len = styles.length; i &lt; len;){
  158. el.setStyle(styles[i++], styles[i++]);
  159. }
  160. } else if (Ext.isObject(styles)) {
  161. el.setStyle(styles);
  162. }
  163. }
  164. },
  165. <span id='Ext-dom-AbstractHelper-method-insertHtml'> /**
  166. </span> * Inserts an HTML fragment into the DOM.
  167. * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
  168. *
  169. * For example take the following HTML: `&lt;div&gt;Contents&lt;/div&gt;`
  170. *
  171. * Using different `where` values inserts element to the following places:
  172. *
  173. * - beforeBegin: `&lt;HERE&gt;&lt;div&gt;Contents&lt;/div&gt;`
  174. * - afterBegin: `&lt;div&gt;&lt;HERE&gt;Contents&lt;/div&gt;`
  175. * - beforeEnd: `&lt;div&gt;Contents&lt;HERE&gt;&lt;/div&gt;`
  176. * - afterEnd: `&lt;div&gt;Contents&lt;/div&gt;&lt;HERE&gt;`
  177. *
  178. * @param {HTMLElement/TextNode} el The context element
  179. * @param {String} html The HTML fragment
  180. * @return {HTMLElement} The new node
  181. */
  182. insertHtml: function(where, el, html) {
  183. var hash = {},
  184. hashVal,
  185. setStart,
  186. range,
  187. frag,
  188. rangeEl,
  189. rs;
  190. where = where.toLowerCase();
  191. // add these here because they are used in both branches of the condition.
  192. hash['beforebegin'] = ['BeforeBegin', 'previousSibling'];
  193. hash['afterend'] = ['AfterEnd', 'nextSibling'];
  194. range = el.ownerDocument.createRange();
  195. setStart = 'setStart' + (this.endRe.test(where) ? 'After' : 'Before');
  196. if (hash[where]) {
  197. range[setStart](el);
  198. frag = range.createContextualFragment(html);
  199. el.parentNode.insertBefore(frag, where == 'beforebegin' ? el : el.nextSibling);
  200. return el[(where == 'beforebegin' ? 'previous' : 'next') + 'Sibling'];
  201. }
  202. else {
  203. rangeEl = (where == 'afterbegin' ? 'first' : 'last') + 'Child';
  204. if (el.firstChild) {
  205. range[setStart](el[rangeEl]);
  206. frag = range.createContextualFragment(html);
  207. if (where == 'afterbegin') {
  208. el.insertBefore(frag, el.firstChild);
  209. }
  210. else {
  211. el.appendChild(frag);
  212. }
  213. }
  214. else {
  215. el.innerHTML = html;
  216. }
  217. return el[rangeEl];
  218. }
  219. throw 'Illegal insertion point -&gt; &quot;' + where + '&quot;';
  220. },
  221. <span id='Ext-dom-AbstractHelper-method-insertBefore'> /**
  222. </span> * Creates new DOM element(s) and inserts them before el.
  223. * @param {String/HTMLElement/Ext.Element} el The context element
  224. * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
  225. * @param {Boolean} [returnElement] true to return a Ext.Element
  226. * @return {HTMLElement/Ext.Element} The new node
  227. */
  228. insertBefore: function(el, o, returnElement) {
  229. return this.doInsert(el, o, returnElement, 'beforebegin');
  230. },
  231. <span id='Ext-dom-AbstractHelper-method-insertAfter'> /**
  232. </span> * Creates new DOM element(s) and inserts them after el.
  233. * @param {String/HTMLElement/Ext.Element} el The context element
  234. * @param {Object} o The DOM object spec (and children)
  235. * @param {Boolean} [returnElement] true to return a Ext.Element
  236. * @return {HTMLElement/Ext.Element} The new node
  237. */
  238. insertAfter: function(el, o, returnElement) {
  239. return this.doInsert(el, o, returnElement, 'afterend', 'nextSibling');
  240. },
  241. <span id='Ext-dom-AbstractHelper-method-insertFirst'> /**
  242. </span> * Creates new DOM element(s) and inserts them as the first child of el.
  243. * @param {String/HTMLElement/Ext.Element} el The context element
  244. * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
  245. * @param {Boolean} [returnElement] true to return a Ext.Element
  246. * @return {HTMLElement/Ext.Element} The new node
  247. */
  248. insertFirst: function(el, o, returnElement) {
  249. return this.doInsert(el, o, returnElement, 'afterbegin', 'firstChild');
  250. },
  251. <span id='Ext-dom-AbstractHelper-method-append'> /**
  252. </span> * Creates new DOM element(s) and appends them to el.
  253. * @param {String/HTMLElement/Ext.Element} el The context element
  254. * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
  255. * @param {Boolean} [returnElement] true to return a Ext.Element
  256. * @return {HTMLElement/Ext.Element} The new node
  257. */
  258. append: function(el, o, returnElement) {
  259. return this.doInsert(el, o, returnElement, 'beforeend', '', true);
  260. },
  261. <span id='Ext-dom-AbstractHelper-method-overwrite'> /**
  262. </span> * Creates new DOM element(s) and overwrites the contents of el with them.
  263. * @param {String/HTMLElement/Ext.Element} el The context element
  264. * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
  265. * @param {Boolean} [returnElement] true to return a Ext.Element
  266. * @return {HTMLElement/Ext.Element} The new node
  267. */
  268. overwrite: function(el, o, returnElement) {
  269. el = Ext.getDom(el);
  270. el.innerHTML = this.markup(o);
  271. return returnElement ? Ext.get(el.firstChild) : el.firstChild;
  272. },
  273. doInsert: function(el, o, returnElement, pos, sibling, append) {
  274. var newNode = this.insertHtml(pos, Ext.getDom(el), this.markup(o));
  275. return returnElement ? Ext.get(newNode, true) : newNode;
  276. }
  277. });
  278. </pre>
  279. </body>
  280. </html>