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