2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 Ext.DomHelper = function(){
\r
11 var tempTableEl = null;
\r
12 var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
\r
13 var tableRe = /^table|tbody|tr|td$/i;
\r
15 // build as innerHTML where available
\r
16 var createHtml = function(o){
\r
17 if(typeof o == 'string'){
\r
21 if (Ext.isArray(o)) {
\r
22 for (var i = 0, l = o.length; i < l; i++) {
\r
23 b += createHtml(o[i]);
\r
32 if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
\r
33 if(attr == "style"){
\r
35 if(typeof s == "function"){
\r
38 if(typeof s == "string"){
\r
39 b += ' style="' + s + '"';
\r
40 }else if(typeof s == "object"){
\r
43 if(typeof s[key] != "function"){
\r
44 b += key + ":" + s[key] + ";";
\r
51 b += ' class="' + o["cls"] + '"';
\r
52 }else if(attr == "htmlFor"){
\r
53 b += ' for="' + o["htmlFor"] + '"';
\r
55 b += " " + attr + '="' + o[attr] + '"';
\r
59 if(emptyTags.test(o.tag)){
\r
63 var cn = o.children || o.cn;
\r
65 b += createHtml(cn);
\r
69 b += "</" + o.tag + ">";
\r
76 var createDom = function(o, parentNode){
\r
78 if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted
\r
79 el = document.createDocumentFragment(); // in one shot using a DocumentFragment
\r
80 for(var i = 0, l = o.length; i < l; i++) {
\r
81 createDom(o[i], el);
\r
83 } else if (typeof o == "string") { // Allow a string as a child spec.
\r
84 el = document.createTextNode(o);
\r
86 el = document.createElement(o.tag||'div');
\r
87 var useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
\r
89 if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || attr == "style" || typeof o[attr] == "function") continue;
\r
91 el.className = o["cls"];
\r
93 if(useSet) el.setAttribute(attr, o[attr]);
\r
94 else el[attr] = o[attr];
\r
97 Ext.DomHelper.applyStyles(el, o.style);
\r
98 var cn = o.children || o.cn;
\r
102 el.innerHTML = o.html;
\r
106 parentNode.appendChild(el);
\r
111 var ieTable = function(depth, s, h, e){
\r
112 tempTableEl.innerHTML = [s, h, e].join('');
\r
113 var i = -1, el = tempTableEl;
\r
114 while(++i < depth){
\r
115 el = el.firstChild;
\r
120 // kill repeat to save bytes
\r
121 var ts = '<table>',
\r
123 tbs = ts+'<tbody>',
\r
124 tbe = '</tbody>'+te,
\r
125 trs = tbs + '<tr>',
\r
129 var insertIntoTable = function(tag, where, el, html){
\r
131 tempTableEl = document.createElement('div');
\r
136 if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
\r
139 if(where == 'beforebegin'){
\r
141 el = el.parentNode;
\r
143 before = el.nextSibling;
\r
144 el = el.parentNode;
\r
146 node = ieTable(4, trs, html, tre);
\r
148 else if(tag == 'tr'){
\r
149 if(where == 'beforebegin'){
\r
151 el = el.parentNode;
\r
152 node = ieTable(3, tbs, html, tbe);
\r
153 } else if(where == 'afterend'){
\r
154 before = el.nextSibling;
\r
155 el = el.parentNode;
\r
156 node = ieTable(3, tbs, html, tbe);
\r
157 } else{ // INTO a TR
\r
158 if(where == 'afterbegin'){
\r
159 before = el.firstChild;
\r
161 node = ieTable(4, trs, html, tre);
\r
163 } else if(tag == 'tbody'){
\r
164 if(where == 'beforebegin'){
\r
166 el = el.parentNode;
\r
167 node = ieTable(2, ts, html, te);
\r
168 } else if(where == 'afterend'){
\r
169 before = el.nextSibling;
\r
170 el = el.parentNode;
\r
171 node = ieTable(2, ts, html, te);
\r
173 if(where == 'afterbegin'){
\r
174 before = el.firstChild;
\r
176 node = ieTable(3, tbs, html, tbe);
\r
179 if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
\r
182 if(where == 'afterbegin'){
\r
183 before = el.firstChild;
\r
185 node = ieTable(2, ts, html, te);
\r
187 el.insertBefore(node, before);
\r
197 markup : function(o){
\r
198 return createHtml(o);
\r
202 applyStyles : function(el, styles){
\r
205 if(typeof styles == "string"){
\r
206 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
\r
208 while ((matches = re.exec(styles)) != null){
\r
209 el.setStyle(matches[1], matches[2]);
\r
211 }else if (typeof styles == "object"){
\r
212 for (var style in styles){
\r
213 el.setStyle(style, styles[style]);
\r
215 }else if (typeof styles == "function"){
\r
216 Ext.DomHelper.applyStyles(el, styles.call());
\r
222 insertHtml : function(where, el, html){
\r
223 where = where.toLowerCase();
\r
224 if(el.insertAdjacentHTML){
\r
225 if(tableRe.test(el.tagName)){
\r
227 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
\r
232 case "beforebegin":
\r
233 el.insertAdjacentHTML('BeforeBegin', html);
\r
234 return el.previousSibling;
\r
236 el.insertAdjacentHTML('AfterBegin', html);
\r
237 return el.firstChild;
\r
239 el.insertAdjacentHTML('BeforeEnd', html);
\r
240 return el.lastChild;
\r
242 el.insertAdjacentHTML('AfterEnd', html);
\r
243 return el.nextSibling;
\r
245 throw 'Illegal insertion point -> "' + where + '"';
\r
247 var range = el.ownerDocument.createRange();
\r
250 case "beforebegin":
\r
251 range.setStartBefore(el);
\r
252 frag = range.createContextualFragment(html);
\r
253 el.parentNode.insertBefore(frag, el);
\r
254 return el.previousSibling;
\r
257 range.setStartBefore(el.firstChild);
\r
258 frag = range.createContextualFragment(html);
\r
259 el.insertBefore(frag, el.firstChild);
\r
260 return el.firstChild;
\r
262 el.innerHTML = html;
\r
263 return el.firstChild;
\r
267 range.setStartAfter(el.lastChild);
\r
268 frag = range.createContextualFragment(html);
\r
269 el.appendChild(frag);
\r
270 return el.lastChild;
\r
272 el.innerHTML = html;
\r
273 return el.lastChild;
\r
276 range.setStartAfter(el);
\r
277 frag = range.createContextualFragment(html);
\r
278 el.parentNode.insertBefore(frag, el.nextSibling);
\r
279 return el.nextSibling;
\r
281 throw 'Illegal insertion point -> "' + where + '"';
\r
285 insertBefore : function(el, o, returnElement){
\r
286 return this.doInsert(el, o, returnElement, "beforeBegin");
\r
290 insertAfter : function(el, o, returnElement){
\r
291 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
\r
295 insertFirst : function(el, o, returnElement){
\r
296 return this.doInsert(el, o, returnElement, "afterBegin", "firstChild");
\r
300 doInsert : function(el, o, returnElement, pos, sibling){
\r
301 el = Ext.getDom(el);
\r
304 newNode = createDom(o, null);
\r
305 (sibling === "firstChild" ? el : el.parentNode).insertBefore(newNode, sibling ? el[sibling] : el);
\r
307 var html = createHtml(o);
\r
308 newNode = this.insertHtml(pos, el, html);
\r
310 return returnElement ? Ext.get(newNode, true) : newNode;
\r
314 append : function(el, o, returnElement){
\r
315 el = Ext.getDom(el);
\r
318 newNode = createDom(o, null);
\r
319 el.appendChild(newNode);
\r
321 var html = createHtml(o);
\r
322 newNode = this.insertHtml("beforeEnd", el, html);
\r
324 return returnElement ? Ext.get(newNode, true) : newNode;
\r
328 overwrite : function(el, o, returnElement){
\r
329 el = Ext.getDom(el);
\r
330 el.innerHTML = createHtml(o);
\r
331 return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
\r
335 createTemplate : function(o){
\r
336 var html = createHtml(o);
\r
337 return new Ext.Template(html);
\r
343 Ext.Template = function(html){
\r
345 if(Ext.isArray(html)){
\r
346 html = html.join("");
\r
347 }else if(a.length > 1){
\r
349 for(var i = 0, len = a.length; i < len; i++){
\r
350 if(typeof a[i] == 'object'){
\r
351 Ext.apply(this, a[i]);
\r
353 buf[buf.length] = a[i];
\r
356 html = buf.join('');
\r
364 Ext.Template.prototype = {
\r
366 applyTemplate : function(values){
\r
368 return this.compiled(values);
\r
370 var useF = this.disableFormats !== true;
\r
371 var fm = Ext.util.Format, tpl = this;
\r
372 var fn = function(m, name, format, args){
\r
373 if(format && useF){
\r
374 if(format.substr(0, 5) == "this."){
\r
375 return tpl.call(format.substr(5), values[name], values);
\r
378 // quoted values are required for strings in compiled templates,
\r
379 // but for non compiled we need to strip them
\r
380 // quoted reversed for jsmin
\r
381 var re = /^\s*['"](.*)["']\s*$/;
\r
382 args = args.split(',');
\r
383 for(var i = 0, len = args.length; i < len; i++){
\r
384 args[i] = args[i].replace(re, "$1");
\r
386 args = [values[name]].concat(args);
\r
388 args = [values[name]];
\r
390 return fm[format].apply(fm, args);
\r
393 return values[name] !== undefined ? values[name] : "";
\r
396 return this.html.replace(this.re, fn);
\r
400 set : function(html, compile){
\r
402 this.compiled = null;
\r
410 disableFormats : false,
\r
413 re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
\r
416 compile : function(){
\r
417 var fm = Ext.util.Format;
\r
418 var useF = this.disableFormats !== true;
\r
419 var sep = Ext.isGecko ? "+" : ",";
\r
420 var fn = function(m, name, format, args){
\r
421 if(format && useF){
\r
422 args = args ? ',' + args : "";
\r
423 if(format.substr(0, 5) != "this."){
\r
424 format = "fm." + format + '(';
\r
426 format = 'this.call("'+ format.substr(5) + '", ';
\r
430 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
\r
432 return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
\r
435 // branched to use + in gecko and [].join() in others
\r
437 body = "this.compiled = function(values){ return '" +
\r
438 this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
\r
441 body = ["this.compiled = function(values){ return ['"];
\r
442 body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
\r
443 body.push("'].join('');};");
\r
444 body = body.join('');
\r
450 // private function used to call members
\r
451 call : function(fnName, value, allValues){
\r
452 return this[fnName](value, allValues);
\r
456 insertFirst: function(el, values, returnElement){
\r
457 return this.doInsert('afterBegin', el, values, returnElement);
\r
461 insertBefore: function(el, values, returnElement){
\r
462 return this.doInsert('beforeBegin', el, values, returnElement);
\r
466 insertAfter : function(el, values, returnElement){
\r
467 return this.doInsert('afterEnd', el, values, returnElement);
\r
471 append : function(el, values, returnElement){
\r
472 return this.doInsert('beforeEnd', el, values, returnElement);
\r
475 doInsert : function(where, el, values, returnEl){
\r
476 el = Ext.getDom(el);
\r
477 var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
\r
478 return returnEl ? Ext.get(newNode, true) : newNode;
\r
482 overwrite : function(el, values, returnElement){
\r
483 el = Ext.getDom(el);
\r
484 el.innerHTML = this.applyTemplate(values);
\r
485 return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
\r
489 Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;
\r
491 // backwards compat
\r
492 Ext.DomHelper.Template = Ext.Template;
\r
495 Ext.Template.from = function(el, config){
\r
496 el = Ext.getDom(el);
\r
497 return new Ext.Template(el.value || el.innerHTML, config || '');
\r
501 Ext.DomQuery = function(){
\r
502 var cache = {}, simpleCache = {}, valueCache = {};
\r
503 var nonSpace = /\S/;
\r
504 var trimRe = /^\s+|\s+$/g;
\r
505 var tplRe = /\{(\d+)\}/g;
\r
506 var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
\r
507 var tagTokenRe = /^(#)?([\w-\*]+)/;
\r
508 var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
\r
510 function child(p, index){
\r
512 var n = p.firstChild;
\r
514 if(n.nodeType == 1){
\r
525 while((n = n.nextSibling) && n.nodeType != 1);
\r
530 while((n = n.previousSibling) && n.nodeType != 1);
\r
534 function children(d){
\r
535 var n = d.firstChild, ni = -1;
\r
537 var nx = n.nextSibling;
\r
538 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
\r
541 n.nodeIndex = ++ni;
\r
548 function byClassName(c, a, v){
\r
552 var r = [], ri = -1, cn;
\r
553 for(var i = 0, ci; ci = c[i]; i++){
\r
554 if((' '+ci.className+' ').indexOf(v) != -1){
\r
561 function attrValue(n, attr){
\r
562 if(!n.tagName && typeof n.length != "undefined"){
\r
571 if(attr == "class" || attr == "className"){
\r
572 return n.className;
\r
574 return n.getAttribute(attr) || n[attr];
\r
578 function getNodes(ns, mode, tagName){
\r
579 var result = [], ri = -1, cs;
\r
583 tagName = tagName || "*";
\r
584 if(typeof ns.getElementsByTagName != "undefined"){
\r
588 for(var i = 0, ni; ni = ns[i]; i++){
\r
589 cs = ni.getElementsByTagName(tagName);
\r
590 for(var j = 0, ci; ci = cs[j]; j++){
\r
594 }else if(mode == "/" || mode == ">"){
\r
595 var utag = tagName.toUpperCase();
\r
596 for(var i = 0, ni, cn; ni = ns[i]; i++){
\r
597 cn = ni.children || ni.childNodes;
\r
598 for(var j = 0, cj; cj = cn[j]; j++){
\r
599 if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
\r
604 }else if(mode == "+"){
\r
605 var utag = tagName.toUpperCase();
\r
606 for(var i = 0, n; n = ns[i]; i++){
\r
607 while((n = n.nextSibling) && n.nodeType != 1);
\r
608 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
\r
612 }else if(mode == "~"){
\r
613 for(var i = 0, n; n = ns[i]; i++){
\r
614 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
\r
623 function concat(a, b){
\r
625 return a.concat(b);
\r
627 for(var i = 0, l = b.length; i < l; i++){
\r
628 a[a.length] = b[i];
\r
633 function byTag(cs, tagName){
\r
634 if(cs.tagName || cs == document){
\r
640 var r = [], ri = -1;
\r
641 tagName = tagName.toLowerCase();
\r
642 for(var i = 0, ci; ci = cs[i]; i++){
\r
643 if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
\r
650 function byId(cs, attr, id){
\r
651 if(cs.tagName || cs == document){
\r
657 var r = [], ri = -1;
\r
658 for(var i = 0,ci; ci = cs[i]; i++){
\r
659 if(ci && ci.id == id){
\r
667 function byAttribute(cs, attr, value, op, custom){
\r
668 var r = [], ri = -1, st = custom=="{";
\r
669 var f = Ext.DomQuery.operators[op];
\r
670 for(var i = 0, ci; ci = cs[i]; i++){
\r
673 a = Ext.DomQuery.getStyle(ci, attr);
\r
675 else if(attr == "class" || attr == "className"){
\r
677 }else if(attr == "for"){
\r
679 }else if(attr == "href"){
\r
680 a = ci.getAttribute("href", 2);
\r
682 a = ci.getAttribute(attr);
\r
684 if((f && f(a, value)) || (!f && a)){
\r
691 function byPseudo(cs, name, value){
\r
692 return Ext.DomQuery.pseudos[name](cs, value);
\r
695 // This is for IE MSXML which does not support expandos.
\r
696 // IE runs the same speed using setAttribute, however FF slows way down
\r
697 // and Safari completely fails so they need to continue to use expandos.
\r
698 var isIE = window.ActiveXObject ? true : false;
\r
700 // this eval is stop the compressor from
\r
701 // renaming the variable to something shorter
\r
702 eval("var batch = 30803;");
\r
706 function nodupIEXml(cs){
\r
708 cs[0].setAttribute("_nodup", d);
\r
710 for(var i = 1, len = cs.length; i < len; i++){
\r
712 if(!c.getAttribute("_nodup") != d){
\r
713 c.setAttribute("_nodup", d);
\r
717 for(var i = 0, len = cs.length; i < len; i++){
\r
718 cs[i].removeAttribute("_nodup");
\r
723 function nodup(cs){
\r
727 var len = cs.length, c, i, r = cs, cj, ri = -1;
\r
728 if(!len || typeof cs.nodeType != "undefined" || len == 1){
\r
731 if(isIE && typeof cs[0].selectSingleNode != "undefined"){
\r
732 return nodupIEXml(cs);
\r
736 for(i = 1; c = cs[i]; i++){
\r
741 for(var j = 0; j < i; j++){
\r
744 for(j = i+1; cj = cs[j]; j++){
\r
745 if(cj._nodup != d){
\r
756 function quickDiffIEXml(c1, c2){
\r
758 for(var i = 0, len = c1.length; i < len; i++){
\r
759 c1[i].setAttribute("_qdiff", d);
\r
762 for(var i = 0, len = c2.length; i < len; i++){
\r
763 if(c2[i].getAttribute("_qdiff") != d){
\r
764 r[r.length] = c2[i];
\r
767 for(var i = 0, len = c1.length; i < len; i++){
\r
768 c1[i].removeAttribute("_qdiff");
\r
773 function quickDiff(c1, c2){
\r
774 var len1 = c1.length;
\r
778 if(isIE && c1[0].selectSingleNode){
\r
779 return quickDiffIEXml(c1, c2);
\r
782 for(var i = 0; i < len1; i++){
\r
786 for(var i = 0, len = c2.length; i < len; i++){
\r
787 if(c2[i]._qdiff != d){
\r
788 r[r.length] = c2[i];
\r
794 function quickId(ns, mode, root, id){
\r
796 var d = root.ownerDocument || root;
\r
797 return d.getElementById(id);
\r
799 ns = getNodes(ns, mode, "*");
\r
800 return byId(ns, null, id);
\r
804 getStyle : function(el, name){
\r
805 return Ext.fly(el).getStyle(name);
\r
808 compile : function(path, type){
\r
809 type = type || "select";
\r
811 var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
\r
812 var q = path, mode, lq;
\r
813 var tk = Ext.DomQuery.matchers;
\r
814 var tklen = tk.length;
\r
817 // accept leading mode switch
\r
818 var lmode = q.match(modeRe);
\r
819 if(lmode && lmode[1]){
\r
820 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
\r
821 q = q.replace(lmode[1], "");
\r
823 // strip leading slashes
\r
824 while(path.substr(0, 1)=="/"){
\r
825 path = path.substr(1);
\r
828 while(q && lq != q){
\r
830 var tm = q.match(tagTokenRe);
\r
831 if(type == "select"){
\r
834 fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
\r
836 fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
\r
838 q = q.replace(tm[0], "");
\r
839 }else if(q.substr(0, 1) != '@'){
\r
840 fn[fn.length] = 'n = getNodes(n, mode, "*");';
\r
845 fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
\r
847 fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
\r
849 q = q.replace(tm[0], "");
\r
852 while(!(mm = q.match(modeRe))){
\r
853 var matched = false;
\r
854 for(var j = 0; j < tklen; j++){
\r
856 var m = q.match(t.re);
\r
858 fn[fn.length] = t.select.replace(tplRe, function(x, i){
\r
861 q = q.replace(m[0], "");
\r
866 // prevent infinite loop on bad selector
\r
868 throw 'Error parsing selector, parsing failed at "' + q + '"';
\r
872 fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
\r
873 q = q.replace(mm[1], "");
\r
876 fn[fn.length] = "return nodup(n);\n}";
\r
882 select : function(path, root, type){
\r
883 if(!root || root == document){
\r
886 if(typeof root == "string"){
\r
887 root = document.getElementById(root);
\r
889 var paths = path.split(",");
\r
891 for(var i = 0, len = paths.length; i < len; i++){
\r
892 var p = paths[i].replace(trimRe, "");
\r
894 cache[p] = Ext.DomQuery.compile(p);
\r
896 throw p + " is not a valid selector";
\r
899 var result = cache[p](root);
\r
900 if(result && result != document){
\r
901 results = results.concat(result);
\r
904 if(paths.length > 1){
\r
905 return nodup(results);
\r
911 selectNode : function(path, root){
\r
912 return Ext.DomQuery.select(path, root)[0];
\r
916 selectValue : function(path, root, defaultValue){
\r
917 path = path.replace(trimRe, "");
\r
918 if(!valueCache[path]){
\r
919 valueCache[path] = Ext.DomQuery.compile(path, "select");
\r
921 var n = valueCache[path](root);
\r
922 n = n[0] ? n[0] : n;
\r
923 var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
\r
924 return ((v === null||v === undefined||v==='') ? defaultValue : v);
\r
928 selectNumber : function(path, root, defaultValue){
\r
929 var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
\r
930 return parseFloat(v);
\r
934 is : function(el, ss){
\r
935 if(typeof el == "string"){
\r
936 el = document.getElementById(el);
\r
938 var isArray = Ext.isArray(el);
\r
939 var result = Ext.DomQuery.filter(isArray ? el : [el], ss);
\r
940 return isArray ? (result.length == el.length) : (result.length > 0);
\r
944 filter : function(els, ss, nonMatches){
\r
945 ss = ss.replace(trimRe, "");
\r
946 if(!simpleCache[ss]){
\r
947 simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");
\r
949 var result = simpleCache[ss](els);
\r
950 return nonMatches ? quickDiff(result, els) : result;
\r
956 select: 'n = byClassName(n, null, " {1} ");'
\r
958 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
\r
959 select: 'n = byPseudo(n, "{1}", "{2}");'
\r
961 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
\r
962 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
\r
965 select: 'n = byId(n, null, "{1}");'
\r
968 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
\r
974 "=" : function(a, v){
\r
977 "!=" : function(a, v){
\r
980 "^=" : function(a, v){
\r
981 return a && a.substr(0, v.length) == v;
\r
983 "$=" : function(a, v){
\r
984 return a && a.substr(a.length-v.length) == v;
\r
986 "*=" : function(a, v){
\r
987 return a && a.indexOf(v) !== -1;
\r
989 "%=" : function(a, v){
\r
990 return (a % v) == 0;
\r
992 "|=" : function(a, v){
\r
993 return a && (a == v || a.substr(0, v.length+1) == v+'-');
\r
995 "~=" : function(a, v){
\r
996 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
\r
1002 "first-child" : function(c){
\r
1003 var r = [], ri = -1, n;
\r
1004 for(var i = 0, ci; ci = n = c[i]; i++){
\r
1005 while((n = n.previousSibling) && n.nodeType != 1);
\r
1013 "last-child" : function(c){
\r
1014 var r = [], ri = -1, n;
\r
1015 for(var i = 0, ci; ci = n = c[i]; i++){
\r
1016 while((n = n.nextSibling) && n.nodeType != 1);
\r
1024 "nth-child" : function(c, a) {
\r
1025 var r = [], ri = -1;
\r
1026 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
\r
1027 var f = (m[1] || 1) - 0, l = m[2] - 0;
\r
1028 for(var i = 0, n; n = c[i]; i++){
\r
1029 var pn = n.parentNode;
\r
1030 if (batch != pn._batch) {
\r
1032 for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
\r
1033 if(cn.nodeType == 1){
\r
1034 cn.nodeIndex = ++j;
\r
1037 pn._batch = batch;
\r
1040 if (l == 0 || n.nodeIndex == l){
\r
1043 } else if ((n.nodeIndex + l) % f == 0){
\r
1051 "only-child" : function(c){
\r
1052 var r = [], ri = -1;;
\r
1053 for(var i = 0, ci; ci = c[i]; i++){
\r
1054 if(!prev(ci) && !next(ci)){
\r
1061 "empty" : function(c){
\r
1062 var r = [], ri = -1;
\r
1063 for(var i = 0, ci; ci = c[i]; i++){
\r
1064 var cns = ci.childNodes, j = 0, cn, empty = true;
\r
1065 while(cn = cns[j]){
\r
1067 if(cn.nodeType == 1 || cn.nodeType == 3){
\r
1079 "contains" : function(c, v){
\r
1080 var r = [], ri = -1;
\r
1081 for(var i = 0, ci; ci = c[i]; i++){
\r
1082 if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
\r
1089 "nodeValue" : function(c, v){
\r
1090 var r = [], ri = -1;
\r
1091 for(var i = 0, ci; ci = c[i]; i++){
\r
1092 if(ci.firstChild && ci.firstChild.nodeValue == v){
\r
1099 "checked" : function(c){
\r
1100 var r = [], ri = -1;
\r
1101 for(var i = 0, ci; ci = c[i]; i++){
\r
1102 if(ci.checked == true){
\r
1109 "not" : function(c, ss){
\r
1110 return Ext.DomQuery.filter(c, ss, true);
\r
1113 "any" : function(c, selectors){
\r
1114 var ss = selectors.split('|');
\r
1115 var r = [], ri = -1, s;
\r
1116 for(var i = 0, ci; ci = c[i]; i++){
\r
1117 for(var j = 0; s = ss[j]; j++){
\r
1118 if(Ext.DomQuery.is(ci, s)){
\r
1127 "odd" : function(c){
\r
1128 return this["nth-child"](c, "odd");
\r
1131 "even" : function(c){
\r
1132 return this["nth-child"](c, "even");
\r
1135 "nth" : function(c, a){
\r
1136 return c[a-1] || [];
\r
1139 "first" : function(c){
\r
1140 return c[0] || [];
\r
1143 "last" : function(c){
\r
1144 return c[c.length-1] || [];
\r
1147 "has" : function(c, ss){
\r
1148 var s = Ext.DomQuery.select;
\r
1149 var r = [], ri = -1;
\r
1150 for(var i = 0, ci; ci = c[i]; i++){
\r
1151 if(s(ss, ci).length > 0){
\r
1158 "next" : function(c, ss){
\r
1159 var is = Ext.DomQuery.is;
\r
1160 var r = [], ri = -1;
\r
1161 for(var i = 0, ci; ci = c[i]; i++){
\r
1163 if(n && is(n, ss)){
\r
1170 "prev" : function(c, ss){
\r
1171 var is = Ext.DomQuery.is;
\r
1172 var r = [], ri = -1;
\r
1173 for(var i = 0, ci; ci = c[i]; i++){
\r
1175 if(n && is(n, ss)){
\r
1186 Ext.query = Ext.DomQuery.select;
\r
1189 Ext.util.Observable = function(){
\r
1191 if(this.listeners){
\r
1192 this.on(this.listeners);
\r
1193 delete this.listeners;
\r
1196 Ext.util.Observable.prototype = {
\r
1198 fireEvent : function(){
\r
1199 if(this.eventsSuspended !== true){
\r
1200 var ce = this.events[arguments[0].toLowerCase()];
\r
1201 if(typeof ce == "object"){
\r
1202 return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
\r
1209 filterOptRe : /^(?:scope|delay|buffer|single)$/,
\r
1212 addListener : function(eventName, fn, scope, o){
\r
1213 if(typeof eventName == "object"){
\r
1216 if(this.filterOptRe.test(e)){
\r
1219 if(typeof o[e] == "function"){
\r
1221 this.addListener(e, o[e], o.scope, o);
\r
1223 // individual options
\r
1224 this.addListener(e, o[e].fn, o[e].scope, o[e]);
\r
1229 o = (!o || typeof o == "boolean") ? {} : o;
\r
1230 eventName = eventName.toLowerCase();
\r
1231 var ce = this.events[eventName] || true;
\r
1232 if(typeof ce == "boolean"){
\r
1233 ce = new Ext.util.Event(this, eventName);
\r
1234 this.events[eventName] = ce;
\r
1236 ce.addListener(fn, scope, o);
\r
1240 removeListener : function(eventName, fn, scope){
\r
1241 var ce = this.events[eventName.toLowerCase()];
\r
1242 if(typeof ce == "object"){
\r
1243 ce.removeListener(fn, scope);
\r
1248 purgeListeners : function(){
\r
1249 for(var evt in this.events){
\r
1250 if(typeof this.events[evt] == "object"){
\r
1251 this.events[evt].clearListeners();
\r
1257 relayEvents : function(o, events){
\r
1258 var createHandler = function(ename){
\r
1259 return function(){
\r
1260 return this.fireEvent.apply(this, Ext.combine(ename, Array.prototype.slice.call(arguments, 0)));
\r
1263 for(var i = 0, len = events.length; i < len; i++){
\r
1264 var ename = events[i];
\r
1265 if(!this.events[ename]){ this.events[ename] = true; };
\r
1266 o.on(ename, createHandler(ename), this);
\r
1271 addEvents : function(o){
\r
1275 if(typeof o == 'string'){
\r
1276 for(var i = 0, a = arguments, v; v = a[i]; i++){
\r
1277 if(!this.events[a[i]]){
\r
1278 this.events[a[i]] = true;
\r
1282 Ext.applyIf(this.events, o);
\r
1287 hasListener : function(eventName){
\r
1288 var e = this.events[eventName];
\r
1289 return typeof e == "object" && e.listeners.length > 0;
\r
1293 suspendEvents : function(){
\r
1294 this.eventsSuspended = true;
\r
1298 resumeEvents : function(){
\r
1299 this.eventsSuspended = false;
\r
1302 // these are considered experimental
\r
1303 // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
\r
1305 getMethodEvent : function(method){
\r
1306 if(!this.methodEvents){
\r
1307 this.methodEvents = {};
\r
1309 var e = this.methodEvents[method];
\r
1312 this.methodEvents[method] = e;
\r
1314 e.originalFn = this[method];
\r
1315 e.methodName = method;
\r
1320 var returnValue, v, cancel;
\r
1323 var makeCall = function(fn, scope, args){
\r
1324 if((v = fn.apply(scope || obj, args)) !== undefined){
\r
1325 if(typeof v === 'object'){
\r
1326 if(v.returnValue !== undefined){
\r
1327 returnValue = v.returnValue;
\r
1331 if(v.cancel === true){
\r
1334 }else if(v === false){
\r
1342 this[method] = function(){
\r
1343 returnValue = v = undefined; cancel = false;
\r
1344 var args = Array.prototype.slice.call(arguments, 0);
\r
1345 for(var i = 0, len = e.before.length; i < len; i++){
\r
1346 makeCall(e.before[i].fn, e.before[i].scope, args);
\r
1348 return returnValue;
\r
1352 if((v = e.originalFn.apply(obj, args)) !== undefined){
\r
1356 for(var i = 0, len = e.after.length; i < len; i++){
\r
1357 makeCall(e.after[i].fn, e.after[i].scope, args);
\r
1359 return returnValue;
\r
1362 return returnValue;
\r
1368 // adds an "interceptor" called before the original method
\r
1369 beforeMethod : function(method, fn, scope){
\r
1370 var e = this.getMethodEvent(method);
\r
1371 e.before.push({fn: fn, scope: scope});
\r
1374 // adds a "sequence" called after the original method
\r
1375 afterMethod : function(method, fn, scope){
\r
1376 var e = this.getMethodEvent(method);
\r
1377 e.after.push({fn: fn, scope: scope});
\r
1380 removeMethodListener : function(method, fn, scope){
\r
1381 var e = this.getMethodEvent(method);
\r
1382 for(var i = 0, len = e.before.length; i < len; i++){
\r
1383 if(e.before[i].fn == fn && e.before[i].scope == scope){
\r
1384 e.before.splice(i, 1);
\r
1388 for(var i = 0, len = e.after.length; i < len; i++){
\r
1389 if(e.after[i].fn == fn && e.after[i].scope == scope){
\r
1390 e.after.splice(i, 1);
\r
1397 Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;
\r
1399 Ext.util.Observable.prototype.un = Ext.util.Observable.prototype.removeListener;
\r
1402 Ext.util.Observable.capture = function(o, fn, scope){
\r
1403 o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
\r
1407 Ext.util.Observable.releaseCapture = function(o){
\r
1408 o.fireEvent = Ext.util.Observable.prototype.fireEvent;
\r
1413 var createBuffered = function(h, o, scope){
\r
1414 var task = new Ext.util.DelayedTask();
\r
1415 return function(){
\r
1416 task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
\r
1420 var createSingle = function(h, e, fn, scope){
\r
1421 return function(){
\r
1422 e.removeListener(fn, scope);
\r
1423 return h.apply(scope, arguments);
\r
1427 var createDelayed = function(h, o, scope){
\r
1428 return function(){
\r
1429 var args = Array.prototype.slice.call(arguments, 0);
\r
1430 setTimeout(function(){
\r
1431 h.apply(scope, args);
\r
1432 }, o.delay || 10);
\r
1436 Ext.util.Event = function(obj, name){
\r
1439 this.listeners = [];
\r
1442 Ext.util.Event.prototype = {
\r
1443 addListener : function(fn, scope, options){
\r
1444 scope = scope || this.obj;
\r
1445 if(!this.isListening(fn, scope)){
\r
1446 var l = this.createListener(fn, scope, options);
\r
1448 this.listeners.push(l);
\r
1449 }else{ // if we are currently firing this event, don't disturb the listener loop
\r
1450 this.listeners = this.listeners.slice(0);
\r
1451 this.listeners.push(l);
\r
1456 createListener : function(fn, scope, o){
\r
1458 scope = scope || this.obj;
\r
1459 var l = {fn: fn, scope: scope, options: o};
\r
1462 h = createDelayed(h, o, scope);
\r
1465 h = createSingle(h, this, fn, scope);
\r
1468 h = createBuffered(h, o, scope);
\r
1474 findListener : function(fn, scope){
\r
1475 scope = scope || this.obj;
\r
1476 var ls = this.listeners;
\r
1477 for(var i = 0, len = ls.length; i < len; i++){
\r
1479 if(l.fn == fn && l.scope == scope){
\r
1486 isListening : function(fn, scope){
\r
1487 return this.findListener(fn, scope) != -1;
\r
1490 removeListener : function(fn, scope){
\r
1492 if((index = this.findListener(fn, scope)) != -1){
\r
1494 this.listeners.splice(index, 1);
\r
1496 this.listeners = this.listeners.slice(0);
\r
1497 this.listeners.splice(index, 1);
\r
1504 clearListeners : function(){
\r
1505 this.listeners = [];
\r
1508 fire : function(){
\r
1509 var ls = this.listeners, scope, len = ls.length;
\r
1511 this.firing = true;
\r
1512 var args = Array.prototype.slice.call(arguments, 0);
\r
1513 for(var i = 0; i < len; i++){
\r
1515 if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
\r
1516 this.firing = false;
\r
1520 this.firing = false;
\r
1527 Ext.EventManager = function(){
\r
1528 var docReadyEvent, docReadyProcId, docReadyState = false;
\r
1529 var resizeEvent, resizeTask, textEvent, textSize;
\r
1530 var E = Ext.lib.Event;
\r
1531 var D = Ext.lib.Dom;
\r
1532 // fix parser confusion
\r
1533 var xname = 'Ex' + 't';
\r
1537 var addListener = function(el, ename, fn, wrap, scope){
\r
1538 var id = Ext.id(el);
\r
1542 var es = elHash[id];
\r
1546 var ls = es[ename];
\r
1555 E.on(el, ename, wrap);
\r
1557 if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
\r
1558 el.addEventListener("DOMMouseScroll", wrap, false);
\r
1559 E.on(window, 'unload', function(){
\r
1560 el.removeEventListener("DOMMouseScroll", wrap, false);
\r
1563 if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
\r
1564 Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
\r
1568 var removeListener = function(el, ename, fn, scope){
\r
1569 el = Ext.getDom(el);
\r
1571 var id = Ext.id(el), es = elHash[id], wrap;
\r
1573 var ls = es[ename], l;
\r
1575 for(var i = 0, len = ls.length; i < len; i++){
\r
1577 if(l.fn == fn && (!scope || l.scope == scope)){
\r
1579 E.un(el, ename, wrap);
\r
1586 if(ename == "mousewheel" && el.addEventListener && wrap){
\r
1587 el.removeEventListener("DOMMouseScroll", wrap, false);
\r
1589 if(ename == "mousedown" && el == document && wrap){ // fix stopped mousedowns on the document
\r
1590 Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
\r
1594 var removeAll = function(el){
\r
1595 el = Ext.getDom(el);
\r
1596 var id = Ext.id(el), es = elHash[id], ls;
\r
1598 for(var ename in es){
\r
1599 if(es.hasOwnProperty(ename)){
\r
1601 for(var i = 0, len = ls.length; i < len; i++){
\r
1602 E.un(el, ename, ls[i].wrap);
\r
1608 delete elHash[id];
\r
1613 var fireDocReady = function(){
\r
1614 if(!docReadyState){
\r
1615 docReadyState = true;
\r
1616 Ext.isReady = true;
\r
1617 if(docReadyProcId){
\r
1618 clearInterval(docReadyProcId);
\r
1620 if(Ext.isGecko || Ext.isOpera) {
\r
1621 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
\r
1624 var defer = document.getElementById("ie-deferred-loader");
\r
1626 defer.onreadystatechange = null;
\r
1627 defer.parentNode.removeChild(defer);
\r
1630 if(docReadyEvent){
\r
1631 docReadyEvent.fire();
\r
1632 docReadyEvent.clearListeners();
\r
1637 var initDocReady = function(){
\r
1638 docReadyEvent = new Ext.util.Event();
\r
1639 if(Ext.isGecko || Ext.isOpera) {
\r
1640 document.addEventListener("DOMContentLoaded", fireDocReady, false);
\r
1641 }else if(Ext.isIE){
\r
1642 document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
\r
1643 var defer = document.getElementById("ie-deferred-loader");
\r
1644 defer.onreadystatechange = function(){
\r
1645 if(this.readyState == "complete"){
\r
1649 }else if(Ext.isSafari){
\r
1650 docReadyProcId = setInterval(function(){
\r
1651 var rs = document.readyState;
\r
1652 if(rs == "complete") {
\r
1657 // no matter what, make sure it fires on load
\r
1658 E.on(window, "load", fireDocReady);
\r
1661 var createBuffered = function(h, o){
\r
1662 var task = new Ext.util.DelayedTask(h);
\r
1663 return function(e){
\r
1664 // create new event object impl so new events don't wipe out properties
\r
1665 e = new Ext.EventObjectImpl(e);
\r
1666 task.delay(o.buffer, h, null, [e]);
\r
1670 var createSingle = function(h, el, ename, fn, scope){
\r
1671 return function(e){
\r
1672 Ext.EventManager.removeListener(el, ename, fn, scope);
\r
1677 var createDelayed = function(h, o){
\r
1678 return function(e){
\r
1679 // create new event object impl so new events don't wipe out properties
\r
1680 e = new Ext.EventObjectImpl(e);
\r
1681 setTimeout(function(){
\r
1683 }, o.delay || 10);
\r
1687 var listen = function(element, ename, opt, fn, scope){
\r
1688 var o = (!opt || typeof opt == "boolean") ? {} : opt;
\r
1689 fn = fn || o.fn; scope = scope || o.scope;
\r
1690 var el = Ext.getDom(element);
\r
1692 throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
\r
1694 var h = function(e){
\r
1695 // prevent errors while unload occurring
\r
1696 if(!window[xname]){
\r
1699 e = Ext.EventObject.setEvent(e);
\r
1702 t = e.getTarget(o.delegate, el);
\r
1709 if(o.stopEvent === true){
\r
1712 if(o.preventDefault === true){
\r
1713 e.preventDefault();
\r
1715 if(o.stopPropagation === true){
\r
1716 e.stopPropagation();
\r
1719 if(o.normalized === false){
\r
1720 e = e.browserEvent;
\r
1723 fn.call(scope || el, e, t, o);
\r
1726 h = createDelayed(h, o);
\r
1729 h = createSingle(h, el, ename, fn, scope);
\r
1732 h = createBuffered(h, o);
\r
1735 addListener(el, ename, fn, h, scope);
\r
1739 var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
\r
1743 addListener : function(element, eventName, fn, scope, options){
\r
1744 if(typeof eventName == "object"){
\r
1745 var o = eventName;
\r
1747 if(propRe.test(e)){
\r
1750 if(typeof o[e] == "function"){
\r
1752 listen(element, e, o, o[e], o.scope);
\r
1754 // individual options
\r
1755 listen(element, e, o[e]);
\r
1760 return listen(element, eventName, options, fn, scope);
\r
1764 removeListener : function(element, eventName, fn, scope){
\r
1765 return removeListener(element, eventName, fn, scope);
\r
1769 removeAll : function(element){
\r
1770 return removeAll(element);
\r
1774 onDocumentReady : function(fn, scope, options){
\r
1775 if(docReadyState){ // if it already fired
\r
1776 docReadyEvent.addListener(fn, scope, options);
\r
1777 docReadyEvent.fire();
\r
1778 docReadyEvent.clearListeners();
\r
1781 if(!docReadyEvent){
\r
1784 options = options || {};
\r
1785 if(!options.delay){
\r
1786 options.delay = 1;
\r
1788 docReadyEvent.addListener(fn, scope, options);
\r
1792 doResizeEvent: function(){
\r
1793 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
\r
1797 onWindowResize : function(fn, scope, options){
\r
1799 resizeEvent = new Ext.util.Event();
\r
1800 resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
\r
1801 E.on(window, "resize", this.fireWindowResize, this);
\r
1803 resizeEvent.addListener(fn, scope, options);
\r
1806 // exposed only to allow manual firing
\r
1807 fireWindowResize : function(){
\r
1809 if((Ext.isIE||Ext.isAir) && resizeTask){
\r
1810 resizeTask.delay(50);
\r
1812 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
\r
1818 onTextResize : function(fn, scope, options){
\r
1820 textEvent = new Ext.util.Event();
\r
1821 var textEl = new Ext.Element(document.createElement('div'));
\r
1822 textEl.dom.className = 'x-text-resize';
\r
1823 textEl.dom.innerHTML = 'X';
\r
1824 textEl.appendTo(document.body);
\r
1825 textSize = textEl.dom.offsetHeight;
\r
1826 setInterval(function(){
\r
1827 if(textEl.dom.offsetHeight != textSize){
\r
1828 textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
\r
1830 }, this.textResizeInterval);
\r
1832 textEvent.addListener(fn, scope, options);
\r
1836 removeResizeListener : function(fn, scope){
\r
1838 resizeEvent.removeListener(fn, scope);
\r
1843 fireResize : function(){
\r
1845 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
\r
1849 ieDeferSrc : false,
\r
1851 textResizeInterval : 50
\r
1854 pub.on = pub.addListener;
\r
1856 pub.un = pub.removeListener;
\r
1858 pub.stoppedMouseDownEvent = new Ext.util.Event();
\r
1862 Ext.onReady = Ext.EventManager.onDocumentReady;
\r
1865 // Initialize doc classes
\r
1867 var initExtCss = function(){
\r
1868 // find the body element
\r
1869 var bd = document.body || document.getElementsByTagName('body')[0];
\r
1870 if(!bd){ return false; }
\r
1872 Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
\r
1873 : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
\r
1874 : Ext.isOpera ? "ext-opera"
\r
1875 : Ext.isSafari ? "ext-safari"
\r
1876 : Ext.isChrome ? "ext-chrome" : ""];
\r
1879 cls.push("ext-mac");
\r
1882 cls.push("ext-linux");
\r
1884 if(Ext.isBorderBox){
\r
1885 cls.push('ext-border-box');
\r
1887 if(Ext.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
\r
1888 var p = bd.parentNode;
\r
1890 p.className += ' ext-strict';
\r
1893 bd.className += cls.join(' ');
\r
1897 if(!initExtCss()){
\r
1898 Ext.onReady(initExtCss);
\r
1903 Ext.EventObject = function(){
\r
1905 var E = Ext.lib.Event;
\r
1907 // safari keypress events for special keys return bad keycodes
\r
1908 var safariKeys = {
\r
1910 63234 : 37, // left
\r
1911 63235 : 39, // right
\r
1913 63233 : 40, // down
\r
1914 63276 : 33, // page up
\r
1915 63277 : 34, // page down
\r
1916 63272 : 46, // delete
\r
1917 63273 : 36, // home
\r
1921 // normalize button clicks
\r
1922 var btnMap = Ext.isIE ? {1:0,4:1,2:2} :
\r
1923 (Ext.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
\r
1925 Ext.EventObjectImpl = function(e){
\r
1927 this.setEvent(e.browserEvent || e);
\r
1931 Ext.EventObjectImpl.prototype = {
\r
1933 browserEvent : null,
\r
1957 CONTROL : 17, // legacy
\r
1970 PAGEUP : 33, // legacy
\r
1973 PAGEDOWN : 34, // legacy
\r
2087 NUM_MULTIPLY: 106,
\r
2095 NUM_DIVISION: 111,
\r
2122 setEvent : function(e){
\r
2123 if(e == this || (e && e.browserEvent)){ // already wrapped
\r
2126 this.browserEvent = e;
\r
2128 // normalize buttons
\r
2129 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
\r
2130 if(e.type == 'click' && this.button == -1){
\r
2133 this.type = e.type;
\r
2134 this.shiftKey = e.shiftKey;
\r
2135 // mac metaKey behaves like ctrlKey
\r
2136 this.ctrlKey = e.ctrlKey || e.metaKey;
\r
2137 this.altKey = e.altKey;
\r
2138 // in getKey these will be normalized for the mac
\r
2139 this.keyCode = e.keyCode;
\r
2140 this.charCode = e.charCode;
\r
2141 // cache the target for the delayed and or buffered events
\r
2142 this.target = E.getTarget(e);
\r
2144 this.xy = E.getXY(e);
\r
2147 this.shiftKey = false;
\r
2148 this.ctrlKey = false;
\r
2149 this.altKey = false;
\r
2151 this.charCode = 0;
\r
2152 this.target = null;
\r
2159 stopEvent : function(){
\r
2160 if(this.browserEvent){
\r
2161 if(this.browserEvent.type == 'mousedown'){
\r
2162 Ext.EventManager.stoppedMouseDownEvent.fire(this);
\r
2164 E.stopEvent(this.browserEvent);
\r
2169 preventDefault : function(){
\r
2170 if(this.browserEvent){
\r
2171 E.preventDefault(this.browserEvent);
\r
2176 isNavKeyPress : function(){
\r
2177 var k = this.keyCode;
\r
2178 k = Ext.isSafari ? (safariKeys[k] || k) : k;
\r
2179 return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
\r
2182 isSpecialKey : function(){
\r
2183 var k = this.keyCode;
\r
2184 return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13 || k == 40 || k == 27 ||
\r
2185 (k == 16) || (k == 17) ||
\r
2186 (k >= 18 && k <= 20) ||
\r
2187 (k >= 33 && k <= 35) ||
\r
2188 (k >= 36 && k <= 39) ||
\r
2189 (k >= 44 && k <= 45);
\r
2193 stopPropagation : function(){
\r
2194 if(this.browserEvent){
\r
2195 if(this.browserEvent.type == 'mousedown'){
\r
2196 Ext.EventManager.stoppedMouseDownEvent.fire(this);
\r
2198 E.stopPropagation(this.browserEvent);
\r
2203 getCharCode : function(){
\r
2204 return this.charCode || this.keyCode;
\r
2208 getKey : function(){
\r
2209 var k = this.keyCode || this.charCode;
\r
2210 return Ext.isSafari ? (safariKeys[k] || k) : k;
\r
2214 getPageX : function(){
\r
2215 return this.xy[0];
\r
2219 getPageY : function(){
\r
2220 return this.xy[1];
\r
2224 getTime : function(){
\r
2225 if(this.browserEvent){
\r
2226 return E.getTime(this.browserEvent);
\r
2232 getXY : function(){
\r
2237 getTarget : function(selector, maxDepth, returnEl){
\r
2238 return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
\r
2242 getRelatedTarget : function(){
\r
2243 if(this.browserEvent){
\r
2244 return E.getRelatedTarget(this.browserEvent);
\r
2250 getWheelDelta : function(){
\r
2251 var e = this.browserEvent;
\r
2253 if(e.wheelDelta){
\r
2254 delta = e.wheelDelta/120;
\r
2255 }else if(e.detail){
\r
2256 delta = -e.detail/3;
\r
2262 hasModifier : function(){
\r
2263 return ((this.ctrlKey || this.altKey) || this.shiftKey) ? true : false;
\r
2267 within : function(el, related, allowEl){
\r
2268 var t = this[related ? "getRelatedTarget" : "getTarget"]();
\r
2269 return t && ((allowEl ? (t === Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
\r
2272 getPoint : function(){
\r
2273 return new Ext.lib.Point(this.xy[0], this.xy[1]);
\r
2277 return new Ext.EventObjectImpl();
\r
2281 var D = Ext.lib.Dom;
\r
2282 var E = Ext.lib.Event;
\r
2283 var A = Ext.lib.Anim;
\r
2285 // local style camelizing for speed
\r
2286 var propCache = {};
\r
2287 var camelRe = /(-[a-z])/gi;
\r
2288 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
\r
2289 var view = document.defaultView;
\r
2291 Ext.Element = function(element, forceNew){
\r
2292 var dom = typeof element == "string" ?
\r
2293 document.getElementById(element) : element;
\r
2294 if(!dom){ // invalid id/element
\r
2298 if(forceNew !== true && id && Ext.Element.cache[id]){ // element object already exists
\r
2299 return Ext.Element.cache[id];
\r
2306 this.id = id || Ext.id(dom);
\r
2309 var El = Ext.Element;
\r
2313 originalDisplay : "",
\r
2315 visibilityMode : 1,
\r
2317 defaultUnit : "px",
\r
2319 setVisibilityMode : function(visMode){
\r
2320 this.visibilityMode = visMode;
\r
2324 enableDisplayMode : function(display){
\r
2325 this.setVisibilityMode(El.DISPLAY);
\r
2326 if(typeof display != "undefined") this.originalDisplay = display;
\r
2331 findParent : function(simpleSelector, maxDepth, returnEl){
\r
2332 var p = this.dom, b = document.body, depth = 0, dq = Ext.DomQuery, stopEl;
\r
2333 maxDepth = maxDepth || 50;
\r
2334 if(typeof maxDepth != "number"){
\r
2335 stopEl = Ext.getDom(maxDepth);
\r
2338 while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
\r
2339 if(dq.is(p, simpleSelector)){
\r
2340 return returnEl ? Ext.get(p) : p;
\r
2350 findParentNode : function(simpleSelector, maxDepth, returnEl){
\r
2351 var p = Ext.fly(this.dom.parentNode, '_internal');
\r
2352 return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
\r
2356 up : function(simpleSelector, maxDepth){
\r
2357 return this.findParentNode(simpleSelector, maxDepth, true);
\r
2363 is : function(simpleSelector){
\r
2364 return Ext.DomQuery.is(this.dom, simpleSelector);
\r
2368 animate : function(args, duration, onComplete, easing, animType){
\r
2369 this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
\r
2374 anim : function(args, opt, animType, defaultDur, defaultEase, cb){
\r
2375 animType = animType || 'run';
\r
2377 var anim = Ext.lib.Anim[animType](
\r
2379 (opt.duration || defaultDur) || .35,
\r
2380 (opt.easing || defaultEase) || 'easeOut',
\r
2382 Ext.callback(cb, this);
\r
2383 Ext.callback(opt.callback, opt.scope || this, [this, opt]);
\r
2391 // private legacy anim prep
\r
2392 preanim : function(a, i){
\r
2393 return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
\r
2397 clean : function(forceReclean){
\r
2398 if(this.isCleaned && forceReclean !== true){
\r
2402 var d = this.dom, n = d.firstChild, ni = -1;
\r
2404 var nx = n.nextSibling;
\r
2405 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
\r
2408 n.nodeIndex = ++ni;
\r
2412 this.isCleaned = true;
\r
2417 scrollIntoView : function(container, hscroll){
\r
2418 var c = Ext.getDom(container) || Ext.getBody().dom;
\r
2419 var el = this.dom;
\r
2421 var o = this.getOffsetsTo(c),
\r
2422 l = o[0] + c.scrollLeft,
\r
2423 t = o[1] + c.scrollTop,
\r
2424 b = t+el.offsetHeight,
\r
2425 r = l+el.offsetWidth;
\r
2427 var ch = c.clientHeight;
\r
2428 var ct = parseInt(c.scrollTop, 10);
\r
2429 var cl = parseInt(c.scrollLeft, 10);
\r
2431 var cr = cl + c.clientWidth;
\r
2433 if(el.offsetHeight > ch || t < ct){
\r
2436 c.scrollTop = b-ch;
\r
2438 c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
\r
2440 if(hscroll !== false){
\r
2441 if(el.offsetWidth > c.clientWidth || l < cl){
\r
2444 c.scrollLeft = r-c.clientWidth;
\r
2446 c.scrollLeft = c.scrollLeft;
\r
2452 scrollChildIntoView : function(child, hscroll){
\r
2453 Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
\r
2457 autoHeight : function(animate, duration, onComplete, easing){
\r
2458 var oldHeight = this.getHeight();
\r
2460 this.setHeight(1); // force clipping
\r
2461 setTimeout(function(){
\r
2462 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
\r
2464 this.setHeight(height);
\r
2466 if(typeof onComplete == "function"){
\r
2470 this.setHeight(oldHeight); // restore original height
\r
2471 this.setHeight(height, animate, duration, function(){
\r
2473 if(typeof onComplete == "function") onComplete();
\r
2474 }.createDelegate(this), easing);
\r
2476 }.createDelegate(this), 0);
\r
2481 contains : function(el){
\r
2482 if(!el){return false;}
\r
2483 return D.isAncestor(this.dom, el.dom ? el.dom : el);
\r
2487 isVisible : function(deep) {
\r
2488 var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
\r
2489 if(deep !== true || !vis){
\r
2492 var p = this.dom.parentNode;
\r
2493 while(p && p.tagName.toLowerCase() != "body"){
\r
2494 if(!Ext.fly(p, '_isVisible').isVisible()){
\r
2503 select : function(selector, unique){
\r
2504 return El.select(selector, unique, this.dom);
\r
2508 query : function(selector){
\r
2509 return Ext.DomQuery.select(selector, this.dom);
\r
2513 child : function(selector, returnDom){
\r
2514 var n = Ext.DomQuery.selectNode(selector, this.dom);
\r
2515 return returnDom ? n : Ext.get(n);
\r
2519 down : function(selector, returnDom){
\r
2520 var n = Ext.DomQuery.selectNode(" > " + selector, this.dom);
\r
2521 return returnDom ? n : Ext.get(n);
\r
2525 initDD : function(group, config, overrides){
\r
2526 var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
\r
2527 return Ext.apply(dd, overrides);
\r
2531 initDDProxy : function(group, config, overrides){
\r
2532 var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
\r
2533 return Ext.apply(dd, overrides);
\r
2537 initDDTarget : function(group, config, overrides){
\r
2538 var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
\r
2539 return Ext.apply(dd, overrides);
\r
2543 setVisible : function(visible, animate){
\r
2544 if(!animate || !A){
\r
2545 if(this.visibilityMode == El.DISPLAY){
\r
2546 this.setDisplayed(visible);
\r
2548 this.fixDisplay();
\r
2549 this.dom.style.visibility = visible ? "visible" : "hidden";
\r
2552 // closure for composites
\r
2553 var dom = this.dom;
\r
2554 var visMode = this.visibilityMode;
\r
2556 this.setOpacity(.01);
\r
2557 this.setVisible(true);
\r
2559 this.anim({opacity: { to: (visible?1:0) }},
\r
2560 this.preanim(arguments, 1),
\r
2561 null, .35, 'easeIn', function(){
\r
2563 if(visMode == El.DISPLAY){
\r
2564 dom.style.display = "none";
\r
2566 dom.style.visibility = "hidden";
\r
2568 Ext.get(dom).setOpacity(1);
\r
2576 isDisplayed : function() {
\r
2577 return this.getStyle("display") != "none";
\r
2581 toggle : function(animate){
\r
2582 this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
\r
2587 setDisplayed : function(value) {
\r
2588 if(typeof value == "boolean"){
\r
2589 value = value ? this.originalDisplay : "none";
\r
2591 this.setStyle("display", value);
\r
2596 focus : function() {
\r
2604 blur : function() {
\r
2612 addClass : function(className){
\r
2613 if(Ext.isArray(className)){
\r
2614 for(var i = 0, len = className.length; i < len; i++) {
\r
2615 this.addClass(className[i]);
\r
2618 if(className && !this.hasClass(className)){
\r
2619 this.dom.className = this.dom.className + " " + className;
\r
2626 radioClass : function(className){
\r
2627 var siblings = this.dom.parentNode.childNodes;
\r
2628 for(var i = 0; i < siblings.length; i++) {
\r
2629 var s = siblings[i];
\r
2630 if(s.nodeType == 1){
\r
2631 Ext.get(s).removeClass(className);
\r
2634 this.addClass(className);
\r
2639 removeClass : function(className){
\r
2640 if(!className || !this.dom.className){
\r
2643 if(Ext.isArray(className)){
\r
2644 for(var i = 0, len = className.length; i < len; i++) {
\r
2645 this.removeClass(className[i]);
\r
2648 if(this.hasClass(className)){
\r
2649 var re = this.classReCache[className];
\r
2651 re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
\r
2652 this.classReCache[className] = re;
\r
2654 this.dom.className =
\r
2655 this.dom.className.replace(re, " ");
\r
2665 toggleClass : function(className){
\r
2666 if(this.hasClass(className)){
\r
2667 this.removeClass(className);
\r
2669 this.addClass(className);
\r
2675 hasClass : function(className){
\r
2676 return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
\r
2680 replaceClass : function(oldClassName, newClassName){
\r
2681 this.removeClass(oldClassName);
\r
2682 this.addClass(newClassName);
\r
2687 getStyles : function(){
\r
2688 var a = arguments, len = a.length, r = {};
\r
2689 for(var i = 0; i < len; i++){
\r
2690 r[a[i]] = this.getStyle(a[i]);
\r
2696 getStyle : function(){
\r
2697 return view && view.getComputedStyle ?
\r
2699 var el = this.dom, v, cs, camel;
\r
2700 if(prop == 'float'){
\r
2701 prop = "cssFloat";
\r
2703 if(v = el.style[prop]){
\r
2706 if(cs = view.getComputedStyle(el, "")){
\r
2707 if(!(camel = propCache[prop])){
\r
2708 camel = propCache[prop] = prop.replace(camelRe, camelFn);
\r
2715 var el = this.dom, v, cs, camel;
\r
2716 if(prop == 'opacity'){
\r
2717 if(typeof el.style.filter == 'string'){
\r
2718 var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
\r
2720 var fv = parseFloat(m[1]);
\r
2722 return fv ? fv / 100 : 0;
\r
2727 }else if(prop == 'float'){
\r
2728 prop = "styleFloat";
\r
2730 if(!(camel = propCache[prop])){
\r
2731 camel = propCache[prop] = prop.replace(camelRe, camelFn);
\r
2733 if(v = el.style[camel]){
\r
2736 if(cs = el.currentStyle){
\r
2744 setStyle : function(prop, value){
\r
2745 if(typeof prop == "string"){
\r
2747 if(!(camel = propCache[prop])){
\r
2748 camel = propCache[prop] = prop.replace(camelRe, camelFn);
\r
2750 if(camel == 'opacity') {
\r
2751 this.setOpacity(value);
\r
2753 this.dom.style[camel] = value;
\r
2756 for(var style in prop){
\r
2757 if(typeof prop[style] != "function"){
\r
2758 this.setStyle(style, prop[style]);
\r
2766 applyStyles : function(style){
\r
2767 Ext.DomHelper.applyStyles(this.dom, style);
\r
2772 getX : function(){
\r
2773 return D.getX(this.dom);
\r
2777 getY : function(){
\r
2778 return D.getY(this.dom);
\r
2782 getXY : function(){
\r
2783 return D.getXY(this.dom);
\r
2787 getOffsetsTo : function(el){
\r
2788 var o = this.getXY();
\r
2789 var e = Ext.fly(el, '_internal').getXY();
\r
2790 return [o[0]-e[0],o[1]-e[1]];
\r
2794 setX : function(x, animate){
\r
2795 if(!animate || !A){
\r
2796 D.setX(this.dom, x);
\r
2798 this.setXY([x, this.getY()], this.preanim(arguments, 1));
\r
2804 setY : function(y, animate){
\r
2805 if(!animate || !A){
\r
2806 D.setY(this.dom, y);
\r
2808 this.setXY([this.getX(), y], this.preanim(arguments, 1));
\r
2814 setLeft : function(left){
\r
2815 this.setStyle("left", this.addUnits(left));
\r
2820 setTop : function(top){
\r
2821 this.setStyle("top", this.addUnits(top));
\r
2826 setRight : function(right){
\r
2827 this.setStyle("right", this.addUnits(right));
\r
2832 setBottom : function(bottom){
\r
2833 this.setStyle("bottom", this.addUnits(bottom));
\r
2838 setXY : function(pos, animate){
\r
2839 if(!animate || !A){
\r
2840 D.setXY(this.dom, pos);
\r
2842 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
\r
2848 setLocation : function(x, y, animate){
\r
2849 this.setXY([x, y], this.preanim(arguments, 2));
\r
2854 moveTo : function(x, y, animate){
\r
2855 this.setXY([x, y], this.preanim(arguments, 2));
\r
2860 getRegion : function(){
\r
2861 return D.getRegion(this.dom);
\r
2865 getHeight : function(contentHeight){
\r
2866 var h = this.dom.offsetHeight || 0;
\r
2867 h = contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
\r
2868 return h < 0 ? 0 : h;
\r
2872 getWidth : function(contentWidth){
\r
2873 var w = this.dom.offsetWidth || 0;
\r
2874 w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
\r
2875 return w < 0 ? 0 : w;
\r
2879 getComputedHeight : function(){
\r
2880 var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
\r
2882 h = parseInt(this.getStyle('height'), 10) || 0;
\r
2883 if(!this.isBorderBox()){
\r
2884 h += this.getFrameWidth('tb');
\r
2891 getComputedWidth : function(){
\r
2892 var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
\r
2894 w = parseInt(this.getStyle('width'), 10) || 0;
\r
2895 if(!this.isBorderBox()){
\r
2896 w += this.getFrameWidth('lr');
\r
2903 getSize : function(contentSize){
\r
2904 return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
\r
2907 getStyleSize : function(){
\r
2908 var w, h, d = this.dom, s = d.style;
\r
2909 if(s.width && s.width != 'auto'){
\r
2910 w = parseInt(s.width, 10);
\r
2911 if(Ext.isBorderBox){
\r
2912 w -= this.getFrameWidth('lr');
\r
2915 if(s.height && s.height != 'auto'){
\r
2916 h = parseInt(s.height, 10);
\r
2917 if(Ext.isBorderBox){
\r
2918 h -= this.getFrameWidth('tb');
\r
2921 return {width: w || this.getWidth(true), height: h || this.getHeight(true)};
\r
2926 getViewSize : function(){
\r
2927 var d = this.dom, doc = document, aw = 0, ah = 0;
\r
2928 if(d == doc || d == doc.body){
\r
2929 return {width : D.getViewWidth(), height: D.getViewHeight()};
\r
2932 width : d.clientWidth,
\r
2933 height: d.clientHeight
\r
2939 getValue : function(asNumber){
\r
2940 return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
\r
2944 adjustWidth : function(width){
\r
2945 if(typeof width == "number"){
\r
2946 if(this.autoBoxAdjust && !this.isBorderBox()){
\r
2947 width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
\r
2957 adjustHeight : function(height){
\r
2958 if(typeof height == "number"){
\r
2959 if(this.autoBoxAdjust && !this.isBorderBox()){
\r
2960 height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
\r
2970 setWidth : function(width, animate){
\r
2971 width = this.adjustWidth(width);
\r
2972 if(!animate || !A){
\r
2973 this.dom.style.width = this.addUnits(width);
\r
2975 this.anim({width: {to: width}}, this.preanim(arguments, 1));
\r
2981 setHeight : function(height, animate){
\r
2982 height = this.adjustHeight(height);
\r
2983 if(!animate || !A){
\r
2984 this.dom.style.height = this.addUnits(height);
\r
2986 this.anim({height: {to: height}}, this.preanim(arguments, 1));
\r
2992 setSize : function(width, height, animate){
\r
2993 if(typeof width == "object"){ // in case of object from getSize()
\r
2994 height = width.height; width = width.width;
\r
2996 width = this.adjustWidth(width); height = this.adjustHeight(height);
\r
2997 if(!animate || !A){
\r
2998 this.dom.style.width = this.addUnits(width);
\r
2999 this.dom.style.height = this.addUnits(height);
\r
3001 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
\r
3007 setBounds : function(x, y, width, height, animate){
\r
3008 if(!animate || !A){
\r
3009 this.setSize(width, height);
\r
3010 this.setLocation(x, y);
\r
3012 width = this.adjustWidth(width); height = this.adjustHeight(height);
\r
3013 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
\r
3014 this.preanim(arguments, 4), 'motion');
\r
3020 setRegion : function(region, animate){
\r
3021 this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
\r
3026 addListener : function(eventName, fn, scope, options){
\r
3027 Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
\r
3031 removeListener : function(eventName, fn, scope){
\r
3032 Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
\r
3037 removeAllListeners : function(){
\r
3038 Ext.EventManager.removeAll(this.dom);
\r
3043 relayEvent : function(eventName, observable){
\r
3044 this.on(eventName, function(e){
\r
3045 observable.fireEvent(eventName, e);
\r
3050 setOpacity : function(opacity, animate){
\r
3051 if(!animate || !A){
\r
3052 var s = this.dom.style;
\r
3055 s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
\r
3056 (opacity == 1 ? "" : " alpha(opacity=" + opacity * 100 + ")");
\r
3058 s.opacity = opacity;
\r
3061 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
\r
3067 getLeft : function(local){
\r
3069 return this.getX();
\r
3071 return parseInt(this.getStyle("left"), 10) || 0;
\r
3076 getRight : function(local){
\r
3078 return this.getX() + this.getWidth();
\r
3080 return (this.getLeft(true) + this.getWidth()) || 0;
\r
3085 getTop : function(local) {
\r
3087 return this.getY();
\r
3089 return parseInt(this.getStyle("top"), 10) || 0;
\r
3094 getBottom : function(local){
\r
3096 return this.getY() + this.getHeight();
\r
3098 return (this.getTop(true) + this.getHeight()) || 0;
\r
3103 position : function(pos, zIndex, x, y){
\r
3105 if(this.getStyle('position') == 'static'){
\r
3106 this.setStyle('position', 'relative');
\r
3109 this.setStyle("position", pos);
\r
3112 this.setStyle("z-index", zIndex);
\r
3114 if(x !== undefined && y !== undefined){
\r
3115 this.setXY([x, y]);
\r
3116 }else if(x !== undefined){
\r
3118 }else if(y !== undefined){
\r
3124 clearPositioning : function(value){
\r
3125 value = value ||'';
\r
3132 "position" : "static"
\r
3138 getPositioning : function(){
\r
3139 var l = this.getStyle("left");
\r
3140 var t = this.getStyle("top");
\r
3142 "position" : this.getStyle("position"),
\r
3144 "right" : l ? "" : this.getStyle("right"),
\r
3146 "bottom" : t ? "" : this.getStyle("bottom"),
\r
3147 "z-index" : this.getStyle("z-index")
\r
3152 getBorderWidth : function(side){
\r
3153 return this.addStyles(side, El.borders);
\r
3157 getPadding : function(side){
\r
3158 return this.addStyles(side, El.paddings);
\r
3162 setPositioning : function(pc){
\r
3163 this.applyStyles(pc);
\r
3164 if(pc.right == "auto"){
\r
3165 this.dom.style.right = "";
\r
3167 if(pc.bottom == "auto"){
\r
3168 this.dom.style.bottom = "";
\r
3174 fixDisplay : function(){
\r
3175 if(this.getStyle("display") == "none"){
\r
3176 this.setStyle("visibility", "hidden");
\r
3177 this.setStyle("display", this.originalDisplay); // first try reverting to default
\r
3178 if(this.getStyle("display") == "none"){ // if that fails, default to block
\r
3179 this.setStyle("display", "block");
\r
3185 setOverflow : function(v){
\r
3186 if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
\r
3187 this.dom.style.overflow = 'hidden';
\r
3188 (function(){this.dom.style.overflow = 'auto';}).defer(1, this);
\r
3190 this.dom.style.overflow = v;
\r
3195 setLeftTop : function(left, top){
\r
3196 this.dom.style.left = this.addUnits(left);
\r
3197 this.dom.style.top = this.addUnits(top);
\r
3202 move : function(direction, distance, animate){
\r
3203 var xy = this.getXY();
\r
3204 direction = direction.toLowerCase();
\r
3205 switch(direction){
\r
3208 this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
\r
3212 this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
\r
3217 this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
\r
3222 this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
\r
3229 clip : function(){
\r
3230 if(!this.isClipped){
\r
3231 this.isClipped = true;
\r
3232 this.originalClip = {
\r
3233 "o": this.getStyle("overflow"),
\r
3234 "x": this.getStyle("overflow-x"),
\r
3235 "y": this.getStyle("overflow-y")
\r
3237 this.setStyle("overflow", "hidden");
\r
3238 this.setStyle("overflow-x", "hidden");
\r
3239 this.setStyle("overflow-y", "hidden");
\r
3245 unclip : function(){
\r
3246 if(this.isClipped){
\r
3247 this.isClipped = false;
\r
3248 var o = this.originalClip;
\r
3249 if(o.o){this.setStyle("overflow", o.o);}
\r
3250 if(o.x){this.setStyle("overflow-x", o.x);}
\r
3251 if(o.y){this.setStyle("overflow-y", o.y);}
\r
3258 getAnchorXY : function(anchor, local, s){
\r
3259 //Passing a different size is useful for pre-calculating anchors,
\r
3260 //especially for anchored animations that change the el size.
\r
3262 var w, h, vp = false;
\r
3265 if(d == document.body || d == document){
\r
3267 w = D.getViewWidth(); h = D.getViewHeight();
\r
3269 w = this.getWidth(); h = this.getHeight();
\r
3272 w = s.width; h = s.height;
\r
3274 var x = 0, y = 0, r = Math.round;
\r
3275 switch((anchor || "tl").toLowerCase()){
\r
3313 if(local === true){
\r
3317 var sc = this.getScroll();
\r
3318 return [x + sc.left, y + sc.top];
\r
3320 //Add the element's offset xy
\r
3321 var o = this.getXY();
\r
3322 return [x+o[0], y+o[1]];
\r
3326 getAlignToXY : function(el, p, o){
\r
3328 if(!el || !el.dom){
\r
3329 throw "Element.alignToXY with an element that doesn't exist";
\r
3332 var c = false; //constrain to viewport
\r
3333 var p1 = "", p2 = "";
\r
3338 }else if(p == "?"){
\r
3340 }else if(p.indexOf("-") == -1){
\r
3343 p = p.toLowerCase();
\r
3344 var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
\r
3346 throw "Element.alignTo with an invalid alignment " + p;
\r
3348 p1 = m[1]; p2 = m[2]; c = !!m[3];
\r
3350 //Subtract the aligned el's internal xy from the target's offset xy
\r
3351 //plus custom offset to get the aligned el's new offset xy
\r
3352 var a1 = this.getAnchorXY(p1, true);
\r
3353 var a2 = el.getAnchorXY(p2, false);
\r
3355 var x = a2[0] - a1[0] + o[0];
\r
3356 var y = a2[1] - a1[1] + o[1];
\r
3359 //constrain the aligned el to viewport if necessary
\r
3360 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
\r
3361 // 5px of margin for ie
\r
3362 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
\r
3364 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
\r
3365 //perpendicular to the vp border, allow the aligned el to slide on that border,
\r
3366 //otherwise swap the aligned el to the opposite border of the target.
\r
3367 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
\r
3368 var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
\r
3369 var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
\r
3370 var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
\r
3372 var doc = document;
\r
3373 var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
\r
3374 var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
\r
3376 if((x+w) > dw + scrollX){
\r
3377 x = swapX ? r.left-w : dw+scrollX-w;
\r
3380 x = swapX ? r.right : scrollX;
\r
3382 if((y+h) > dh + scrollY){
\r
3383 y = swapY ? r.top-h : dh+scrollY-h;
\r
3386 y = swapY ? r.bottom : scrollY;
\r
3393 getConstrainToXY : function(){
\r
3394 var os = {top:0, left:0, bottom:0, right: 0};
\r
3396 return function(el, local, offsets, proposedXY){
\r
3398 offsets = offsets ? Ext.applyIf(offsets, os) : os;
\r
3400 var vw, vh, vx = 0, vy = 0;
\r
3401 if(el.dom == document.body || el.dom == document){
\r
3402 vw = Ext.lib.Dom.getViewWidth();
\r
3403 vh = Ext.lib.Dom.getViewHeight();
\r
3405 vw = el.dom.clientWidth;
\r
3406 vh = el.dom.clientHeight;
\r
3408 var vxy = el.getXY();
\r
3414 var s = el.getScroll();
\r
3416 vx += offsets.left + s.left;
\r
3417 vy += offsets.top + s.top;
\r
3419 vw -= offsets.right;
\r
3420 vh -= offsets.bottom;
\r
3425 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
\r
3426 var x = xy[0], y = xy[1];
\r
3427 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
\r
3429 // only move it if it needs it
\r
3430 var moved = false;
\r
3432 // first validate right/bottom
\r
3441 // then make sure top/left isn't negative
\r
3450 return moved ? [x, y] : false;
\r
3455 adjustForConstraints : function(xy, parent, offsets){
\r
3456 return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
\r
3460 alignTo : function(element, position, offsets, animate){
\r
3461 var xy = this.getAlignToXY(element, position, offsets);
\r
3462 this.setXY(xy, this.preanim(arguments, 3));
\r
3467 anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
\r
3468 var action = function(){
\r
3469 this.alignTo(el, alignment, offsets, animate);
\r
3470 Ext.callback(callback, this);
\r
3472 Ext.EventManager.onWindowResize(action, this);
\r
3473 var tm = typeof monitorScroll;
\r
3474 if(tm != 'undefined'){
\r
3475 Ext.EventManager.on(window, 'scroll', action, this,
\r
3476 {buffer: tm == 'number' ? monitorScroll : 50});
\r
3478 action.call(this); // align immediately
\r
3482 clearOpacity : function(){
\r
3483 if (window.ActiveXObject) {
\r
3484 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
\r
3485 this.dom.style.filter = "";
\r
3488 this.dom.style.opacity = "";
\r
3489 this.dom.style["-moz-opacity"] = "";
\r
3490 this.dom.style["-khtml-opacity"] = "";
\r
3496 hide : function(animate){
\r
3497 this.setVisible(false, this.preanim(arguments, 0));
\r
3502 show : function(animate){
\r
3503 this.setVisible(true, this.preanim(arguments, 0));
\r
3508 addUnits : function(size){
\r
3509 return Ext.Element.addUnits(size, this.defaultUnit);
\r
3513 update : function(html, loadScripts, callback){
\r
3514 if(typeof html == "undefined"){
\r
3517 if(loadScripts !== true){
\r
3518 this.dom.innerHTML = html;
\r
3519 if(typeof callback == "function"){
\r
3524 var id = Ext.id();
\r
3525 var dom = this.dom;
\r
3527 html += '<span id="' + id + '"></span>';
\r
3529 E.onAvailable(id, function(){
\r
3530 var hd = document.getElementsByTagName("head")[0];
\r
3531 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
\r
3532 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
\r
3533 var typeRe = /\stype=([\'\"])(.*?)\1/i;
\r
3536 while(match = re.exec(html)){
\r
3537 var attrs = match[1];
\r
3538 var srcMatch = attrs ? attrs.match(srcRe) : false;
\r
3539 if(srcMatch && srcMatch[2]){
\r
3540 var s = document.createElement("script");
\r
3541 s.src = srcMatch[2];
\r
3542 var typeMatch = attrs.match(typeRe);
\r
3543 if(typeMatch && typeMatch[2]){
\r
3544 s.type = typeMatch[2];
\r
3546 hd.appendChild(s);
\r
3547 }else if(match[2] && match[2].length > 0){
\r
3548 if(window.execScript) {
\r
3549 window.execScript(match[2]);
\r
3551 window.eval(match[2]);
\r
3555 var el = document.getElementById(id);
\r
3556 if(el){Ext.removeNode(el);}
\r
3557 if(typeof callback == "function"){
\r
3561 dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
\r
3566 load : function(){
\r
3567 var um = this.getUpdater();
\r
3568 um.update.apply(um, arguments);
\r
3573 getUpdater : function(){
\r
3574 if(!this.updateManager){
\r
3575 this.updateManager = new Ext.Updater(this);
\r
3577 return this.updateManager;
\r
3581 unselectable : function(){
\r
3582 this.dom.unselectable = "on";
\r
3583 this.swallowEvent("selectstart", true);
\r
3584 this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
\r
3585 this.addClass("x-unselectable");
\r
3590 getCenterXY : function(){
\r
3591 return this.getAlignToXY(document, 'c-c');
\r
3595 center : function(centerIn){
\r
3596 this.alignTo(centerIn || document, 'c-c');
\r
3601 isBorderBox : function(){
\r
3602 return noBoxAdjust[this.dom.tagName.toLowerCase()] || Ext.isBorderBox;
\r
3606 getBox : function(contentBox, local){
\r
3609 xy = this.getXY();
\r
3611 var left = parseInt(this.getStyle("left"), 10) || 0;
\r
3612 var top = parseInt(this.getStyle("top"), 10) || 0;
\r
3615 var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
\r
3617 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
\r
3619 var l = this.getBorderWidth("l")+this.getPadding("l");
\r
3620 var r = this.getBorderWidth("r")+this.getPadding("r");
\r
3621 var t = this.getBorderWidth("t")+this.getPadding("t");
\r
3622 var b = this.getBorderWidth("b")+this.getPadding("b");
\r
3623 bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
\r
3625 bx.right = bx.x + bx.width;
\r
3626 bx.bottom = bx.y + bx.height;
\r
3631 getFrameWidth : function(sides, onlyContentBox){
\r
3632 return onlyContentBox && Ext.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
\r
3636 setBox : function(box, adjust, animate){
\r
3637 var w = box.width, h = box.height;
\r
3638 if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
\r
3639 w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
\r
3640 h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
\r
3642 this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
\r
3647 repaint : function(){
\r
3648 var dom = this.dom;
\r
3649 this.addClass("x-repaint");
\r
3650 setTimeout(function(){
\r
3651 Ext.get(dom).removeClass("x-repaint");
\r
3657 getMargins : function(side){
\r
3660 top: parseInt(this.getStyle("margin-top"), 10) || 0,
\r
3661 left: parseInt(this.getStyle("margin-left"), 10) || 0,
\r
3662 bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
\r
3663 right: parseInt(this.getStyle("margin-right"), 10) || 0
\r
3666 return this.addStyles(side, El.margins);
\r
3671 addStyles : function(sides, styles){
\r
3672 var val = 0, v, w;
\r
3673 for(var i = 0, len = sides.length; i < len; i++){
\r
3674 v = this.getStyle(styles[sides.charAt(i)]);
\r
3676 w = parseInt(v, 10);
\r
3677 if(w){ val += (w >= 0 ? w : -1 * w); }
\r
3684 createProxy : function(config, renderTo, matchBox){
\r
3685 config = typeof config == "object" ?
\r
3686 config : {tag : "div", cls: config};
\r
3690 proxy = Ext.DomHelper.append(renderTo, config, true);
\r
3692 proxy = Ext.DomHelper.insertBefore(this.dom, config, true);
\r
3695 proxy.setBox(this.getBox());
\r
3701 mask : function(msg, msgCls){
\r
3702 if(this.getStyle("position") == "static"){
\r
3703 this.addClass("x-masked-relative");
\r
3705 if(this._maskMsg){
\r
3706 this._maskMsg.remove();
\r
3709 this._mask.remove();
\r
3712 this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);
\r
3714 this.addClass("x-masked");
\r
3715 this._mask.setDisplayed(true);
\r
3716 if(typeof msg == 'string'){
\r
3717 this._maskMsg = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
\r
3718 var mm = this._maskMsg;
\r
3719 mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
\r
3720 mm.dom.firstChild.innerHTML = msg;
\r
3721 mm.setDisplayed(true);
\r
3724 if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
\r
3725 this._mask.setSize(this.getWidth(), this.getHeight());
\r
3727 return this._mask;
\r
3731 unmask : function(){
\r
3733 if(this._maskMsg){
\r
3734 this._maskMsg.remove();
\r
3735 delete this._maskMsg;
\r
3737 this._mask.remove();
\r
3738 delete this._mask;
\r
3740 this.removeClass(["x-masked", "x-masked-relative"]);
\r
3744 isMasked : function(){
\r
3745 return this._mask && this._mask.isVisible();
\r
3749 createShim : function(){
\r
3750 var el = document.createElement('iframe');
\r
3751 el.frameBorder = '0';
\r
3752 el.className = 'ext-shim';
\r
3753 if(Ext.isIE && Ext.isSecure){
\r
3754 el.src = Ext.SSL_SECURE_URL;
\r
3756 var shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
\r
3757 shim.autoBoxAdjust = false;
\r
3762 remove : function(){
\r
3763 Ext.removeNode(this.dom);
\r
3764 delete El.cache[this.dom.id];
\r
3768 hover : function(overFn, outFn, scope){
\r
3769 var preOverFn = function(e){
\r
3770 if(!e.within(this, true)){
\r
3771 overFn.apply(scope || this, arguments);
\r
3774 var preOutFn = function(e){
\r
3775 if(!e.within(this, true)){
\r
3776 outFn.apply(scope || this, arguments);
\r
3779 this.on("mouseover", preOverFn, this.dom);
\r
3780 this.on("mouseout", preOutFn, this.dom);
\r
3785 addClassOnOver : function(className){
\r
3788 Ext.fly(this, '_internal').addClass(className);
\r
3791 Ext.fly(this, '_internal').removeClass(className);
\r
3798 addClassOnFocus : function(className){
\r
3799 this.on("focus", function(){
\r
3800 Ext.fly(this, '_internal').addClass(className);
\r
3802 this.on("blur", function(){
\r
3803 Ext.fly(this, '_internal').removeClass(className);
\r
3808 addClassOnClick : function(className){
\r
3809 var dom = this.dom;
\r
3810 this.on("mousedown", function(){
\r
3811 Ext.fly(dom, '_internal').addClass(className);
\r
3812 var d = Ext.getDoc();
\r
3813 var fn = function(){
\r
3814 Ext.fly(dom, '_internal').removeClass(className);
\r
3815 d.removeListener("mouseup", fn);
\r
3817 d.on("mouseup", fn);
\r
3823 swallowEvent : function(eventName, preventDefault){
\r
3824 var fn = function(e){
\r
3825 e.stopPropagation();
\r
3826 if(preventDefault){
\r
3827 e.preventDefault();
\r
3830 if(Ext.isArray(eventName)){
\r
3831 for(var i = 0, len = eventName.length; i < len; i++){
\r
3832 this.on(eventName[i], fn);
\r
3836 this.on(eventName, fn);
\r
3841 parent : function(selector, returnDom){
\r
3842 return this.matchNode('parentNode', 'parentNode', selector, returnDom);
\r
3846 next : function(selector, returnDom){
\r
3847 return this.matchNode('nextSibling', 'nextSibling', selector, returnDom);
\r
3851 prev : function(selector, returnDom){
\r
3852 return this.matchNode('previousSibling', 'previousSibling', selector, returnDom);
\r
3857 first : function(selector, returnDom){
\r
3858 return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
\r
3862 last : function(selector, returnDom){
\r
3863 return this.matchNode('previousSibling', 'lastChild', selector, returnDom);
\r
3866 matchNode : function(dir, start, selector, returnDom){
\r
3867 var n = this.dom[start];
\r
3869 if(n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))){
\r
3870 return !returnDom ? Ext.get(n) : n;
\r
3878 appendChild: function(el){
\r
3880 el.appendTo(this);
\r
3885 createChild: function(config, insertBefore, returnDom){
\r
3886 config = config || {tag:'div'};
\r
3888 return Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
\r
3890 return Ext.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);
\r
3894 appendTo: function(el){
\r
3895 el = Ext.getDom(el);
\r
3896 el.appendChild(this.dom);
\r
3901 insertBefore: function(el){
\r
3902 el = Ext.getDom(el);
\r
3903 el.parentNode.insertBefore(this.dom, el);
\r
3908 insertAfter: function(el){
\r
3909 el = Ext.getDom(el);
\r
3910 el.parentNode.insertBefore(this.dom, el.nextSibling);
\r
3915 insertFirst: function(el, returnDom){
\r
3917 if(typeof el == 'object' && !el.nodeType && !el.dom){ // dh config
\r
3918 return this.createChild(el, this.dom.firstChild, returnDom);
\r
3920 el = Ext.getDom(el);
\r
3921 this.dom.insertBefore(el, this.dom.firstChild);
\r
3922 return !returnDom ? Ext.get(el) : el;
\r
3927 insertSibling: function(el, where, returnDom){
\r
3929 if(Ext.isArray(el)){
\r
3930 for(var i = 0, len = el.length; i < len; i++){
\r
3931 rt = this.insertSibling(el[i], where, returnDom);
\r
3935 where = where ? where.toLowerCase() : 'before';
\r
3937 var refNode = where == 'before' ? this.dom : this.dom.nextSibling;
\r
3939 if(typeof el == 'object' && !el.nodeType && !el.dom){ // dh config
\r
3940 if(where == 'after' && !this.dom.nextSibling){
\r
3941 rt = Ext.DomHelper.append(this.dom.parentNode, el, !returnDom);
\r
3943 rt = Ext.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
\r
3947 rt = this.dom.parentNode.insertBefore(Ext.getDom(el), refNode);
\r
3956 wrap: function(config, returnDom){
\r
3958 config = {tag: "div"};
\r
3960 var newEl = Ext.DomHelper.insertBefore(this.dom, config, !returnDom);
\r
3961 newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
\r
3966 replace: function(el){
\r
3968 this.insertBefore(el);
\r
3974 replaceWith: function(el){
\r
3975 if(typeof el == 'object' && !el.nodeType && !el.dom){ // dh config
\r
3976 el = this.insertSibling(el, 'before');
\r
3978 el = Ext.getDom(el);
\r
3979 this.dom.parentNode.insertBefore(el, this.dom);
\r
3981 El.uncache(this.id);
\r
3982 Ext.removeNode(this.dom);
\r
3984 this.id = Ext.id(el);
\r
3985 El.cache[this.id] = this;
\r
3990 insertHtml : function(where, html, returnEl){
\r
3991 var el = Ext.DomHelper.insertHtml(where, this.dom, html);
\r
3992 return returnEl ? Ext.get(el) : el;
\r
3996 set : function(o, useSet){
\r
3997 var el = this.dom;
\r
3998 useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
\r
3999 for(var attr in o){
\r
4000 if(attr == "style" || typeof o[attr] == "function") continue;
\r
4002 el.className = o["cls"];
\r
4003 }else if(o.hasOwnProperty(attr)){
\r
4004 if(useSet) el.setAttribute(attr, o[attr]);
\r
4005 else el[attr] = o[attr];
\r
4009 Ext.DomHelper.applyStyles(el, o.style);
\r
4015 addKeyListener : function(key, fn, scope){
\r
4017 if(typeof key != "object" || Ext.isArray(key)){
\r
4026 shift : key.shift,
\r
4033 return new Ext.KeyMap(this, config);
\r
4037 addKeyMap : function(config){
\r
4038 return new Ext.KeyMap(this, config);
\r
4042 isScrollable : function(){
\r
4043 var dom = this.dom;
\r
4044 return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
\r
4048 scrollTo : function(side, value, animate){
\r
4049 var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
\r
4050 if(!animate || !A){
\r
4051 this.dom[prop] = value;
\r
4053 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
\r
4054 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
\r
4060 scroll : function(direction, distance, animate){
\r
4061 if(!this.isScrollable()){
\r
4064 var el = this.dom;
\r
4065 var l = el.scrollLeft, t = el.scrollTop;
\r
4066 var w = el.scrollWidth, h = el.scrollHeight;
\r
4067 var cw = el.clientWidth, ch = el.clientHeight;
\r
4068 direction = direction.toLowerCase();
\r
4069 var scrolled = false;
\r
4070 var a = this.preanim(arguments, 2);
\r
4071 switch(direction){
\r
4075 var v = Math.min(l + distance, w-cw);
\r
4076 this.scrollTo("left", v, a);
\r
4083 var v = Math.max(l - distance, 0);
\r
4084 this.scrollTo("left", v, a);
\r
4092 var v = Math.max(t - distance, 0);
\r
4093 this.scrollTo("top", v, a);
\r
4101 var v = Math.min(t + distance, h-ch);
\r
4102 this.scrollTo("top", v, a);
\r
4111 translatePoints : function(x, y){
\r
4112 if(typeof x == 'object' || Ext.isArray(x)){
\r
4113 y = x[1]; x = x[0];
\r
4115 var p = this.getStyle('position');
\r
4116 var o = this.getXY();
\r
4118 var l = parseInt(this.getStyle('left'), 10);
\r
4119 var t = parseInt(this.getStyle('top'), 10);
\r
4122 l = (p == "relative") ? 0 : this.dom.offsetLeft;
\r
4125 t = (p == "relative") ? 0 : this.dom.offsetTop;
\r
4128 return {left: (x - o[0] + l), top: (y - o[1] + t)};
\r
4132 getScroll : function(){
\r
4133 var d = this.dom, doc = document;
\r
4134 if(d == doc || d == doc.body){
\r
4136 if(Ext.isIE && Ext.isStrict){
\r
4137 l = doc.documentElement.scrollLeft || (doc.body.scrollLeft || 0);
\r
4138 t = doc.documentElement.scrollTop || (doc.body.scrollTop || 0);
\r
4140 l = window.pageXOffset || (doc.body.scrollLeft || 0);
\r
4141 t = window.pageYOffset || (doc.body.scrollTop || 0);
\r
4143 return {left: l, top: t};
\r
4145 return {left: d.scrollLeft, top: d.scrollTop};
\r
4150 getColor : function(attr, defaultValue, prefix){
\r
4151 var v = this.getStyle(attr);
\r
4152 if(!v || v == "transparent" || v == "inherit") {
\r
4153 return defaultValue;
\r
4155 var color = typeof prefix == "undefined" ? "#" : prefix;
\r
4156 if(v.substr(0, 4) == "rgb("){
\r
4157 var rvs = v.slice(4, v.length -1).split(",");
\r
4158 for(var i = 0; i < 3; i++){
\r
4159 var h = parseInt(rvs[i]);
\r
4160 var s = h.toString(16);
\r
4167 if(v.substr(0, 1) == "#"){
\r
4168 if(v.length == 4) {
\r
4169 for(var i = 1; i < 4; i++){
\r
4170 var c = v.charAt(i);
\r
4173 }else if(v.length == 7){
\r
4174 color += v.substr(1);
\r
4178 return(color.length > 5 ? color.toLowerCase() : defaultValue);
\r
4182 boxWrap : function(cls){
\r
4183 cls = cls || 'x-box';
\r
4184 var el = Ext.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
\r
4185 el.child('.'+cls+'-mc').dom.appendChild(this.dom);
\r
4190 getAttributeNS : Ext.isIE ? function(ns, name){
\r
4192 var type = typeof d[ns+":"+name];
\r
4193 if(type != 'undefined' && type != 'unknown'){
\r
4194 return d[ns+":"+name];
\r
4197 } : function(ns, name){
\r
4199 return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
\r
4203 getTextWidth : function(text, min, max){
\r
4204 return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);
\r
4208 var ep = El.prototype;
\r
4211 ep.on = ep.addListener;
\r
4212 // backwards compat
\r
4213 ep.mon = ep.addListener;
\r
4215 ep.getUpdateManager = ep.getUpdater;
\r
4218 ep.un = ep.removeListener;
\r
4221 ep.autoBoxAdjust = true;
\r
4224 El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
\r
4227 El.addUnits = function(v, defaultUnit){
\r
4228 if(v === "" || v == "auto"){
\r
4231 if(v === undefined){
\r
4234 if(typeof v == "number" || !El.unitPattern.test(v)){
\r
4235 return v + (defaultUnit || 'px');
\r
4240 // special markup used throughout Ext when box wrapping elements
\r
4241 El.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
\r
4243 El.VISIBILITY = 1;
\r
4247 El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
\r
4248 El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
\r
4249 El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
\r
4259 El.get = function(el){
\r
4261 if(!el){ return null; }
\r
4262 if(typeof el == "string"){ // element id
\r
4263 if(!(elm = document.getElementById(el))){
\r
4266 if(ex = El.cache[el]){
\r
4269 ex = El.cache[el] = new El(elm);
\r
4272 }else if(el.tagName){ // dom element
\r
4273 if(!(id = el.id)){
\r
4276 if(ex = El.cache[id]){
\r
4279 ex = El.cache[id] = new El(el);
\r
4282 }else if(el instanceof El){
\r
4284 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
\r
4285 // catch case where it hasn't been appended
\r
4286 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
\r
4289 }else if(el.isComposite){
\r
4291 }else if(Ext.isArray(el)){
\r
4292 return El.select(el);
\r
4293 }else if(el == document){
\r
4294 // create a bogus element object representing the document object
\r
4296 var f = function(){};
\r
4297 f.prototype = El.prototype;
\r
4299 docEl.dom = document;
\r
4307 El.uncache = function(el){
\r
4308 for(var i = 0, a = arguments, len = a.length; i < len; i++) {
\r
4310 delete El.cache[a[i].id || a[i]];
\r
4316 // Garbage collection - uncache elements/purge listeners on orphaned elements
\r
4317 // so we don't hold a reference and cause the browser to retain them
\r
4318 El.garbageCollect = function(){
\r
4319 if(!Ext.enableGarbageCollector){
\r
4320 clearInterval(El.collectorThread);
\r
4323 for(var eid in El.cache){
\r
4324 var el = El.cache[eid], d = el.dom;
\r
4325 // -------------------------------------------------------
\r
4326 // Determining what is garbage:
\r
4327 // -------------------------------------------------------
\r
4329 // dom node is null, definitely garbage
\r
4330 // -------------------------------------------------------
\r
4332 // no parentNode == direct orphan, definitely garbage
\r
4333 // -------------------------------------------------------
\r
4334 // !d.offsetParent && !document.getElementById(eid)
\r
4335 // display none elements have no offsetParent so we will
\r
4336 // also try to look it up by it's id. However, check
\r
4337 // offsetParent first so we don't do unneeded lookups.
\r
4338 // This enables collection of elements that are not orphans
\r
4339 // directly, but somewhere up the line they have an orphan
\r
4341 // -------------------------------------------------------
\r
4342 if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
\r
4343 delete El.cache[eid];
\r
4344 if(d && Ext.enableListenerCollection){
\r
4345 Ext.EventManager.removeAll(d);
\r
4350 El.collectorThreadId = setInterval(El.garbageCollect, 30000);
\r
4352 var flyFn = function(){};
\r
4353 flyFn.prototype = El.prototype;
\r
4354 var _cls = new flyFn();
\r
4356 // dom is optional
\r
4357 El.Flyweight = function(dom){
\r
4361 El.Flyweight.prototype = _cls;
\r
4362 El.Flyweight.prototype.isFlyweight = true;
\r
4364 El._flyweights = {};
\r
4366 El.fly = function(el, named){
\r
4367 named = named || '_global';
\r
4368 el = Ext.getDom(el);
\r
4372 if(!El._flyweights[named]){
\r
4373 El._flyweights[named] = new El.Flyweight();
\r
4375 El._flyweights[named].dom = el;
\r
4376 return El._flyweights[named];
\r
4384 // speedy lookup for elements never to box adjust
\r
4385 var noBoxAdjust = Ext.isStrict ? {
\r
4388 input:1, select:1, textarea:1
\r
4390 if(Ext.isIE || Ext.isGecko){
\r
4391 noBoxAdjust['button'] = 1;
\r
4395 Ext.EventManager.on(window, 'unload', function(){
\r
4397 delete El._flyweights;
\r
4401 //Notifies Element that fx methods are available
\r
4402 Ext.enableFx = true;
\r
4407 slideIn : function(anchor, o){
\r
4408 var el = this.getFxEl();
\r
4411 el.queueFx(o, function(){
\r
4413 anchor = anchor || "t";
\r
4415 // fix display to visibility
\r
4416 this.fixDisplay();
\r
4418 // restore values after effect
\r
4419 var r = this.getFxRestore();
\r
4420 var b = this.getBox();
\r
4421 // fixed size for slide
\r
4425 var wrap = this.fxWrap(r.pos, o, "hidden");
\r
4427 var st = this.dom.style;
\r
4428 st.visibility = "visible";
\r
4429 st.position = "absolute";
\r
4431 // clear out temp styles after slide and unwrap
\r
4432 var after = function(){
\r
4433 el.fxUnwrap(wrap, r.pos, o);
\r
4434 st.width = r.width;
\r
4435 st.height = r.height;
\r
4438 // time to calc the positions
\r
4439 var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
\r
4441 switch(anchor.toLowerCase()){
\r
4443 wrap.setSize(b.width, 0);
\r
4444 st.left = st.bottom = "0";
\r
4448 wrap.setSize(0, b.height);
\r
4449 st.right = st.top = "0";
\r
4453 wrap.setSize(0, b.height);
\r
4454 wrap.setX(b.right);
\r
4455 st.left = st.top = "0";
\r
4456 a = {width: bw, points: pt};
\r
4459 wrap.setSize(b.width, 0);
\r
4460 wrap.setY(b.bottom);
\r
4461 st.left = st.top = "0";
\r
4462 a = {height: bh, points: pt};
\r
4465 wrap.setSize(0, 0);
\r
4466 st.right = st.bottom = "0";
\r
4467 a = {width: bw, height: bh};
\r
4470 wrap.setSize(0, 0);
\r
4471 wrap.setY(b.y+b.height);
\r
4472 st.right = st.top = "0";
\r
4473 a = {width: bw, height: bh, points: pt};
\r
4476 wrap.setSize(0, 0);
\r
4477 wrap.setXY([b.right, b.bottom]);
\r
4478 st.left = st.top = "0";
\r
4479 a = {width: bw, height: bh, points: pt};
\r
4482 wrap.setSize(0, 0);
\r
4483 wrap.setX(b.x+b.width);
\r
4484 st.left = st.bottom = "0";
\r
4485 a = {width: bw, height: bh, points: pt};
\r
4488 this.dom.style.visibility = "visible";
\r
4491 arguments.callee.anim = wrap.fxanim(a,
\r
4495 'easeOut', after);
\r
4501 slideOut : function(anchor, o){
\r
4502 var el = this.getFxEl();
\r
4505 el.queueFx(o, function(){
\r
4507 anchor = anchor || "t";
\r
4509 // restore values after effect
\r
4510 var r = this.getFxRestore();
\r
4512 var b = this.getBox();
\r
4513 // fixed size for slide
\r
4517 var wrap = this.fxWrap(r.pos, o, "visible");
\r
4519 var st = this.dom.style;
\r
4520 st.visibility = "visible";
\r
4521 st.position = "absolute";
\r
4525 var after = function(){
\r
4527 el.setDisplayed(false);
\r
4532 el.fxUnwrap(wrap, r.pos, o);
\r
4534 st.width = r.width;
\r
4535 st.height = r.height;
\r
4540 var a, zero = {to: 0};
\r
4541 switch(anchor.toLowerCase()){
\r
4543 st.left = st.bottom = "0";
\r
4544 a = {height: zero};
\r
4547 st.right = st.top = "0";
\r
4548 a = {width: zero};
\r
4551 st.left = st.top = "0";
\r
4552 a = {width: zero, points: {to:[b.right, b.y]}};
\r
4555 st.left = st.top = "0";
\r
4556 a = {height: zero, points: {to:[b.x, b.bottom]}};
\r
4559 st.right = st.bottom = "0";
\r
4560 a = {width: zero, height: zero};
\r
4563 st.right = st.top = "0";
\r
4564 a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
\r
4567 st.left = st.top = "0";
\r
4568 a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
\r
4571 st.left = st.bottom = "0";
\r
4572 a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
\r
4576 arguments.callee.anim = wrap.fxanim(a,
\r
4580 "easeOut", after);
\r
4586 puff : function(o){
\r
4587 var el = this.getFxEl();
\r
4590 el.queueFx(o, function(){
\r
4591 this.clearOpacity();
\r
4594 // restore values after effect
\r
4595 var r = this.getFxRestore();
\r
4596 var st = this.dom.style;
\r
4598 var after = function(){
\r
4600 el.setDisplayed(false);
\r
4605 el.clearOpacity();
\r
4607 el.setPositioning(r.pos);
\r
4608 st.width = r.width;
\r
4609 st.height = r.height;
\r
4614 var width = this.getWidth();
\r
4615 var height = this.getHeight();
\r
4617 arguments.callee.anim = this.fxanim({
\r
4618 width : {to: this.adjustWidth(width * 2)},
\r
4619 height : {to: this.adjustHeight(height * 2)},
\r
4620 points : {by: [-(width * .5), -(height * .5)]},
\r
4621 opacity : {to: 0},
\r
4622 fontSize: {to:200, unit: "%"}
\r
4627 "easeOut", after);
\r
4633 switchOff : function(o){
\r
4634 var el = this.getFxEl();
\r
4637 el.queueFx(o, function(){
\r
4638 this.clearOpacity();
\r
4641 // restore values after effect
\r
4642 var r = this.getFxRestore();
\r
4643 var st = this.dom.style;
\r
4645 var after = function(){
\r
4647 el.setDisplayed(false);
\r
4652 el.clearOpacity();
\r
4653 el.setPositioning(r.pos);
\r
4654 st.width = r.width;
\r
4655 st.height = r.height;
\r
4660 this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
\r
4661 this.clearOpacity();
\r
4665 points:{by:[0, this.getHeight() * .5]}
\r
4666 }, o, 'motion', 0.3, 'easeIn', after);
\r
4667 }).defer(100, this);
\r
4674 highlight : function(color, o){
\r
4675 var el = this.getFxEl();
\r
4678 el.queueFx(o, function(){
\r
4679 color = color || "ffff9c";
\r
4680 var attr = o.attr || "backgroundColor";
\r
4682 this.clearOpacity();
\r
4685 var origColor = this.getColor(attr);
\r
4686 var restoreColor = this.dom.style[attr];
\r
4687 var endColor = (o.endColor || origColor) || "ffffff";
\r
4689 var after = function(){
\r
4690 el.dom.style[attr] = restoreColor;
\r
4695 a[attr] = {from: color, to: endColor};
\r
4696 arguments.callee.anim = this.fxanim(a,
\r
4706 frame : function(color, count, o){
\r
4707 var el = this.getFxEl();
\r
4710 el.queueFx(o, function(){
\r
4711 color = color || "#C3DAF9";
\r
4712 if(color.length == 6){
\r
4713 color = "#" + color;
\r
4715 count = count || 1;
\r
4716 var duration = o.duration || 1;
\r
4719 var b = this.getBox();
\r
4720 var animFn = function(){
\r
4721 var proxy = Ext.getBody().createChild({
\r
4723 visbility:"hidden",
\r
4724 position:"absolute",
\r
4725 "z-index":"35000", // yee haw
\r
4726 border:"0px solid " + color
\r
4729 var scale = Ext.isBorderBox ? 2 : 1;
\r
4731 top:{from:b.y, to:b.y - 20},
\r
4732 left:{from:b.x, to:b.x - 20},
\r
4733 borderWidth:{from:0, to:10},
\r
4734 opacity:{from:1, to:0},
\r
4735 height:{from:b.height, to:(b.height + (20*scale))},
\r
4736 width:{from:b.width, to:(b.width + (20*scale))}
\r
4737 }, duration, function(){
\r
4746 animFn.call(this);
\r
4752 pause : function(seconds){
\r
4753 var el = this.getFxEl();
\r
4756 el.queueFx(o, function(){
\r
4757 setTimeout(function(){
\r
4759 }, seconds * 1000);
\r
4765 fadeIn : function(o){
\r
4766 var el = this.getFxEl();
\r
4768 el.queueFx(o, function(){
\r
4769 this.setOpacity(0);
\r
4770 this.fixDisplay();
\r
4771 this.dom.style.visibility = 'visible';
\r
4772 var to = o.endOpacity || 1;
\r
4773 arguments.callee.anim = this.fxanim({opacity:{to:to}},
\r
4774 o, null, .5, "easeOut", function(){
\r
4776 this.clearOpacity();
\r
4785 fadeOut : function(o){
\r
4786 var el = this.getFxEl();
\r
4788 el.queueFx(o, function(){
\r
4789 var to = o.endOpacity || 0;
\r
4790 arguments.callee.anim = this.fxanim({opacity:{to:to}},
\r
4791 o, null, .5, "easeOut", function(){
\r
4793 if(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){
\r
4794 this.dom.style.display = "none";
\r
4796 this.dom.style.visibility = "hidden";
\r
4798 this.clearOpacity();
\r
4807 scale : function(w, h, o){
\r
4808 this.shift(Ext.apply({}, o, {
\r
4816 shift : function(o){
\r
4817 var el = this.getFxEl();
\r
4819 el.queueFx(o, function(){
\r
4820 var a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity;
\r
4821 if(w !== undefined){
\r
4822 a.width = {to: this.adjustWidth(w)};
\r
4824 if(h !== undefined){
\r
4825 a.height = {to: this.adjustHeight(h)};
\r
4827 if(o.left !== undefined){
\r
4828 a.left = {to: o.left};
\r
4830 if(o.top !== undefined){
\r
4831 a.top = {to: o.top};
\r
4833 if(o.right !== undefined){
\r
4834 a.right = {to: o.right};
\r
4836 if(o.bottom !== undefined){
\r
4837 a.bottom = {to: o.bottom};
\r
4839 if(x !== undefined || y !== undefined){
\r
4841 x !== undefined ? x : this.getX(),
\r
4842 y !== undefined ? y : this.getY()
\r
4845 if(op !== undefined){
\r
4846 a.opacity = {to: op};
\r
4848 if(o.xy !== undefined){
\r
4849 a.points = {to: o.xy};
\r
4851 arguments.callee.anim = this.fxanim(a,
\r
4852 o, 'motion', .35, "easeOut", function(){
\r
4860 ghost : function(anchor, o){
\r
4861 var el = this.getFxEl();
\r
4864 el.queueFx(o, function(){
\r
4865 anchor = anchor || "b";
\r
4867 // restore values after effect
\r
4868 var r = this.getFxRestore();
\r
4869 var w = this.getWidth(),
\r
4870 h = this.getHeight();
\r
4872 var st = this.dom.style;
\r
4874 var after = function(){
\r
4876 el.setDisplayed(false);
\r
4881 el.clearOpacity();
\r
4882 el.setPositioning(r.pos);
\r
4883 st.width = r.width;
\r
4884 st.height = r.height;
\r
4889 var a = {opacity: {to: 0}, points: {}}, pt = a.points;
\r
4890 switch(anchor.toLowerCase()){
\r
4917 arguments.callee.anim = this.fxanim(a,
\r
4921 "easeOut", after);
\r
4927 syncFx : function(){
\r
4928 this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
\r
4930 concurrent : true,
\r
4937 sequenceFx : function(){
\r
4938 this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
\r
4940 concurrent : false,
\r
4947 nextFx : function(){
\r
4948 var ef = this.fxQueue[0];
\r
4955 hasActiveFx : function(){
\r
4956 return this.fxQueue && this.fxQueue[0];
\r
4960 stopFx : function(){
\r
4961 if(this.hasActiveFx()){
\r
4962 var cur = this.fxQueue[0];
\r
4963 if(cur && cur.anim && cur.anim.isAnimated()){
\r
4964 this.fxQueue = [cur]; // clear out others
\r
4965 cur.anim.stop(true);
\r
4972 beforeFx : function(o){
\r
4973 if(this.hasActiveFx() && !o.concurrent){
\r
4984 hasFxBlock : function(){
\r
4985 var q = this.fxQueue;
\r
4986 return q && q[0] && q[0].block;
\r
4990 queueFx : function(o, fn){
\r
4991 if(!this.fxQueue){
\r
4992 this.fxQueue = [];
\r
4994 if(!this.hasFxBlock()){
\r
4995 Ext.applyIf(o, this.fxDefaults);
\r
4996 if(!o.concurrent){
\r
4997 var run = this.beforeFx(o);
\r
4998 fn.block = o.block;
\r
4999 this.fxQueue.push(fn);
\r
5011 fxWrap : function(pos, o, vis){
\r
5013 if(!o.wrap || !(wrap = Ext.get(o.wrap))){
\r
5015 if(o.fixPosition){
\r
5016 wrapXY = this.getXY();
\r
5018 var div = document.createElement("div");
\r
5019 div.style.visibility = vis;
\r
5020 wrap = Ext.get(this.dom.parentNode.insertBefore(div, this.dom));
\r
5021 wrap.setPositioning(pos);
\r
5022 if(wrap.getStyle("position") == "static"){
\r
5023 wrap.position("relative");
\r
5025 this.clearPositioning('auto');
\r
5027 wrap.dom.appendChild(this.dom);
\r
5029 wrap.setXY(wrapXY);
\r
5036 fxUnwrap : function(wrap, pos, o){
\r
5037 this.clearPositioning();
\r
5038 this.setPositioning(pos);
\r
5040 wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
\r
5046 getFxRestore : function(){
\r
5047 var st = this.dom.style;
\r
5048 return {pos: this.getPositioning(), width: st.width, height : st.height};
\r
5052 afterFx : function(o){
\r
5054 this.applyStyles(o.afterStyle);
\r
5057 this.addClass(o.afterCls);
\r
5059 if(o.remove === true){
\r
5062 Ext.callback(o.callback, o.scope, [this]);
\r
5063 if(!o.concurrent){
\r
5064 this.fxQueue.shift();
\r
5070 getFxEl : function(){ // support for composite element fx
\r
5071 return Ext.get(this.dom);
\r
5075 fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
\r
5076 animType = animType || 'run';
\r
5078 var anim = Ext.lib.Anim[animType](
\r
5080 (opt.duration || defaultDur) || .35,
\r
5081 (opt.easing || defaultEase) || 'easeOut',
\r
5083 Ext.callback(cb, this);
\r
5092 // backwords compat
\r
5093 Ext.Fx.resize = Ext.Fx.scale;
\r
5095 //When included, Ext.Fx is automatically applied to Element so that all basic
\r
5096 //effects are available directly via the Element API
\r
5097 Ext.apply(Ext.Element.prototype, Ext.Fx);
\r
5100 Ext.CompositeElement = function(els){
\r
5101 this.elements = [];
\r
5102 this.addElements(els);
\r
5104 Ext.CompositeElement.prototype = {
\r
5105 isComposite: true,
\r
5106 addElements : function(els){
\r
5107 if(!els) return this;
\r
5108 if(typeof els == "string"){
\r
5109 els = Ext.Element.selectorFunction(els);
\r
5111 var yels = this.elements;
\r
5112 var index = yels.length-1;
\r
5113 for(var i = 0, len = els.length; i < len; i++) {
\r
5114 yels[++index] = Ext.get(els[i]);
\r
5120 fill : function(els){
\r
5121 this.elements = [];
\r
5127 filter : function(selector){
\r
5129 this.each(function(el){
\r
5130 if(el.is(selector)){
\r
5131 els[els.length] = el.dom;
\r
5138 invoke : function(fn, args){
\r
5139 var els = this.elements;
\r
5140 for(var i = 0, len = els.length; i < len; i++) {
\r
5141 Ext.Element.prototype[fn].apply(els[i], args);
\r
5146 add : function(els){
\r
5147 if(typeof els == "string"){
\r
5148 this.addElements(Ext.Element.selectorFunction(els));
\r
5149 }else if(els.length !== undefined){
\r
5150 this.addElements(els);
\r
5152 this.addElements([els]);
\r
5157 each : function(fn, scope){
\r
5158 var els = this.elements;
\r
5159 for(var i = 0, len = els.length; i < len; i++){
\r
5160 if(fn.call(scope || els[i], els[i], this, i) === false) {
\r
5168 item : function(index){
\r
5169 return this.elements[index] || null;
\r
5173 first : function(){
\r
5174 return this.item(0);
\r
5178 last : function(){
\r
5179 return this.item(this.elements.length-1);
\r
5183 getCount : function(){
\r
5184 return this.elements.length;
\r
5188 contains : function(el){
\r
5189 return this.indexOf(el) !== -1;
\r
5193 indexOf : function(el){
\r
5194 return this.elements.indexOf(Ext.get(el));
\r
5199 removeElement : function(el, removeDom){
\r
5200 if(Ext.isArray(el)){
\r
5201 for(var i = 0, len = el.length; i < len; i++){
\r
5202 this.removeElement(el[i]);
\r
5206 var index = typeof el == 'number' ? el : this.indexOf(el);
\r
5207 if(index !== -1 && this.elements[index]){
\r
5209 var d = this.elements[index];
\r
5213 Ext.removeNode(d);
\r
5216 this.elements.splice(index, 1);
\r
5222 replaceElement : function(el, replacement, domReplace){
\r
5223 var index = typeof el == 'number' ? el : this.indexOf(el);
\r
5226 this.elements[index].replaceWith(replacement);
\r
5228 this.elements.splice(index, 1, Ext.get(replacement))
\r
5235 clear : function(){
\r
5236 this.elements = [];
\r
5240 Ext.CompositeElement.createCall = function(proto, fnName){
\r
5241 if(!proto[fnName]){
\r
5242 proto[fnName] = function(){
\r
5243 return this.invoke(fnName, arguments);
\r
5247 for(var fnName in Ext.Element.prototype){
\r
5248 if(typeof Ext.Element.prototype[fnName] == "function"){
\r
5249 Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, fnName);
\r
5255 Ext.CompositeElementLite = function(els){
\r
5256 Ext.CompositeElementLite.superclass.constructor.call(this, els);
\r
5257 this.el = new Ext.Element.Flyweight();
\r
5259 Ext.extend(Ext.CompositeElementLite, Ext.CompositeElement, {
\r
5260 addElements : function(els){
\r
5262 if(Ext.isArray(els)){
\r
5263 this.elements = this.elements.concat(els);
\r
5265 var yels = this.elements;
\r
5266 var index = yels.length-1;
\r
5267 for(var i = 0, len = els.length; i < len; i++) {
\r
5268 yels[++index] = els[i];
\r
5274 invoke : function(fn, args){
\r
5275 var els = this.elements;
\r
5277 for(var i = 0, len = els.length; i < len; i++) {
\r
5279 Ext.Element.prototype[fn].apply(el, args);
\r
5284 item : function(index){
\r
5285 if(!this.elements[index]){
\r
5288 this.el.dom = this.elements[index];
\r
5292 // fixes scope with flyweight
\r
5293 addListener : function(eventName, handler, scope, opt){
\r
5294 var els = this.elements;
\r
5295 for(var i = 0, len = els.length; i < len; i++) {
\r
5296 Ext.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
\r
5302 each : function(fn, scope){
\r
5303 var els = this.elements;
\r
5305 for(var i = 0, len = els.length; i < len; i++){
\r
5307 if(fn.call(scope || el, el, this, i) === false){
\r
5314 indexOf : function(el){
\r
5315 return this.elements.indexOf(Ext.getDom(el));
\r
5318 replaceElement : function(el, replacement, domReplace){
\r
5319 var index = typeof el == 'number' ? el : this.indexOf(el);
\r
5321 replacement = Ext.getDom(replacement);
\r
5323 var d = this.elements[index];
\r
5324 d.parentNode.insertBefore(replacement, d);
\r
5325 Ext.removeNode(d);
\r
5327 this.elements.splice(index, 1, replacement);
\r
5332 Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
\r
5334 Ext.Element.selectorFunction = Ext.DomQuery.select;
\r
5337 Ext.Element.select = function(selector, unique, root){
\r
5339 if(typeof selector == "string"){
\r
5340 els = Ext.Element.selectorFunction(selector, root);
\r
5341 }else if(selector.length !== undefined){
\r
5344 throw "Invalid selector";
\r
5346 if(unique === true){
\r
5347 return new Ext.CompositeElement(els);
\r
5349 return new Ext.CompositeElementLite(els);
\r
5353 Ext.select = Ext.Element.select;
\r
5355 Ext.data.Connection = function(config){
\r
5356 Ext.apply(this, config);
\r
5361 "requestcomplete",
\r
5363 "requestexception"
\r
5365 Ext.data.Connection.superclass.constructor.call(this);
\r
5368 Ext.extend(Ext.data.Connection, Ext.util.Observable, {
\r
5379 disableCaching: true,
\r
5382 disableCachingParam: '_dc',
\r
5386 request : function(o){
\r
5387 if(this.fireEvent("beforerequest", this, o) !== false){
\r
5390 if(typeof p == "function"){
\r
5391 p = p.call(o.scope||window, o);
\r
5393 if(typeof p == "object"){
\r
5394 p = Ext.urlEncode(p);
\r
5396 if(this.extraParams){
\r
5397 var extras = Ext.urlEncode(this.extraParams);
\r
5398 p = p ? (p + '&' + extras) : extras;
\r
5401 var url = o.url || this.url;
\r
5402 if(typeof url == 'function'){
\r
5403 url = url.call(o.scope||window, o);
\r
5407 var form = Ext.getDom(o.form);
\r
5408 url = url || form.action;
\r
5410 var enctype = form.getAttribute("enctype");
\r
5411 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
\r
5412 return this.doFormUpload(o, p, url);
\r
5414 var f = Ext.lib.Ajax.serializeForm(form);
\r
5415 p = p ? (p + '&' + f) : f;
\r
5418 var hs = o.headers;
\r
5419 if(this.defaultHeaders){
\r
5420 hs = Ext.apply(hs || {}, this.defaultHeaders);
\r
5427 success: this.handleResponse,
\r
5428 failure: this.handleFailure,
\r
5430 argument: {options: o},
\r
5431 timeout : o.timeout || this.timeout
\r
5434 var method = o.method||this.method||((p || o.xmlData || o.jsonData) ? "POST" : "GET");
\r
5436 if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
\r
5437 var dcp = o.disableCachingParam || this.disableCachingParam;
\r
5438 url += (url.indexOf('?') != -1 ? '&' : '?') + dcp + '=' + (new Date().getTime());
\r
5441 if(typeof o.autoAbort == 'boolean'){ // options gets top priority
\r
5445 }else if(this.autoAbort !== false){
\r
5448 if((method == 'GET' || o.xmlData || o.jsonData) && p){
\r
5449 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
\r
5452 this.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
\r
5453 return this.transId;
\r
5455 Ext.callback(o.callback, o.scope, [o, null, null]);
\r
5461 isLoading : function(transId){
\r
5463 return Ext.lib.Ajax.isCallInProgress(transId);
\r
5465 return this.transId ? true : false;
\r
5470 abort : function(transId){
\r
5471 if(transId || this.isLoading()){
\r
5472 Ext.lib.Ajax.abort(transId || this.transId);
\r
5477 handleResponse : function(response){
\r
5478 this.transId = false;
\r
5479 var options = response.argument.options;
\r
5480 response.argument = options ? options.argument : null;
\r
5481 this.fireEvent("requestcomplete", this, response, options);
\r
5482 Ext.callback(options.success, options.scope, [response, options]);
\r
5483 Ext.callback(options.callback, options.scope, [options, true, response]);
\r
5487 handleFailure : function(response, e){
\r
5488 this.transId = false;
\r
5489 var options = response.argument.options;
\r
5490 response.argument = options ? options.argument : null;
\r
5491 this.fireEvent("requestexception", this, response, options, e);
\r
5492 Ext.callback(options.failure, options.scope, [response, options]);
\r
5493 Ext.callback(options.callback, options.scope, [options, false, response]);
\r
5497 doFormUpload : function(o, ps, url){
\r
5498 var id = Ext.id();
\r
5499 var frame = document.createElement('iframe');
\r
5502 frame.className = 'x-hidden';
\r
5504 frame.src = Ext.SSL_SECURE_URL;
\r
5506 document.body.appendChild(frame);
\r
5509 document.frames[id].name = id;
\r
5512 var form = Ext.getDom(o.form);
\r
5514 form.method = 'POST';
\r
5515 form.enctype = form.encoding = 'multipart/form-data';
\r
5517 form.action = url;
\r
5521 if(ps){ // add dynamic params
\r
5523 ps = Ext.urlDecode(ps, false);
\r
5525 if(ps.hasOwnProperty(k)){
\r
5526 hd = document.createElement('input');
\r
5527 hd.type = 'hidden';
\r
5530 form.appendChild(hd);
\r
5537 var r = { // bogus response object
\r
5538 responseText : '',
\r
5539 responseXML : null
\r
5542 r.argument = o ? o.argument : null;
\r
5547 doc = frame.contentWindow.document;
\r
5549 doc = (frame.contentDocument || window.frames[id].document);
\r
5551 if(doc && doc.body){
\r
5552 r.responseText = doc.body.innerHTML;
\r
5554 if(doc && doc.XMLDocument){
\r
5555 r.responseXML = doc.XMLDocument;
\r
5557 r.responseXML = doc;
\r
5564 Ext.EventManager.removeListener(frame, 'load', cb, this);
\r
5566 this.fireEvent("requestcomplete", this, r, o);
\r
5568 Ext.callback(o.success, o.scope, [r, o]);
\r
5569 Ext.callback(o.callback, o.scope, [o, true, r]);
\r
5571 setTimeout(function(){Ext.removeNode(frame);}, 100);
\r
5574 Ext.EventManager.on(frame, 'load', cb, this);
\r
5577 if(hiddens){ // remove dynamic params
\r
5578 for(var i = 0, len = hiddens.length; i < len; i++){
\r
5579 Ext.removeNode(hiddens[i]);
\r
5586 Ext.Ajax = new Ext.data.Connection({
\r
5604 autoAbort : false,
\r
5607 serializeForm : function(form){
\r
5608 return Ext.lib.Ajax.serializeForm(form);
\r
5612 Ext.Updater = Ext.extend(Ext.util.Observable, {
\r
5613 constructor: function(el, forceNew){
\r
5615 if(!forceNew && el.updateManager){
\r
5616 return el.updateManager;
\r
5621 this.defaultUrl = null;
\r
5631 var d = Ext.Updater.defaults;
\r
5633 this.sslBlankUrl = d.sslBlankUrl;
\r
5635 this.disableCaching = d.disableCaching;
\r
5637 this.indicatorText = d.indicatorText;
\r
5639 this.showLoadIndicator = d.showLoadIndicator;
\r
5641 this.timeout = d.timeout;
\r
5643 this.loadScripts = d.loadScripts;
\r
5645 this.transaction = null;
\r
5647 this.refreshDelegate = this.refresh.createDelegate(this);
\r
5649 this.updateDelegate = this.update.createDelegate(this);
\r
5651 this.formUpdateDelegate = this.formUpdate.createDelegate(this);
\r
5653 if(!this.renderer){
\r
5655 this.renderer = this.getDefaultRenderer();
\r
5657 Ext.Updater.superclass.constructor.call(this);
\r
5660 getDefaultRenderer: function() {
\r
5661 return new Ext.Updater.BasicRenderer();
\r
5664 getEl : function(){
\r
5669 update : function(url, params, callback, discardUrl){
\r
5670 if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
\r
5671 var cfg, callerScope;
\r
5672 if(typeof url == "object"){ // must be config object
\r
5675 params = params || cfg.params;
\r
5676 callback = callback || cfg.callback;
\r
5677 discardUrl = discardUrl || cfg.discardUrl;
\r
5678 callerScope = cfg.scope;
\r
5679 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
\r
5680 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
\r
5681 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
\r
5682 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
\r
5684 this.showLoading();
\r
5687 this.defaultUrl = url;
\r
5689 if(typeof url == "function"){
\r
5690 url = url.call(this);
\r
5693 var o = Ext.apply({}, {
\r
5695 params: (typeof params == "function" && callerScope) ? params.createDelegate(callerScope) : params,
\r
5696 success: this.processSuccess,
\r
5697 failure: this.processFailure,
\r
5699 callback: undefined,
\r
5700 timeout: (this.timeout*1000),
\r
5701 disableCaching: this.disableCaching,
\r
5706 "callback": callback,
\r
5707 "scope": callerScope || window,
\r
5712 this.transaction = Ext.Ajax.request(o);
\r
5717 formUpdate : function(form, url, reset, callback){
\r
5718 if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
\r
5719 if(typeof url == "function"){
\r
5720 url = url.call(this);
\r
5722 form = Ext.getDom(form)
\r
5723 this.transaction = Ext.Ajax.request({
\r
5726 success: this.processSuccess,
\r
5727 failure: this.processFailure,
\r
5729 timeout: (this.timeout*1000),
\r
5733 "callback": callback,
\r
5737 this.showLoading.defer(1, this);
\r
5742 refresh : function(callback){
\r
5743 if(this.defaultUrl == null){
\r
5746 this.update(this.defaultUrl, null, callback, true);
\r
5750 startAutoRefresh : function(interval, url, params, callback, refreshNow){
\r
5752 this.update(url || this.defaultUrl, params, callback, true);
\r
5754 if(this.autoRefreshProcId){
\r
5755 clearInterval(this.autoRefreshProcId);
\r
5757 this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
\r
5761 stopAutoRefresh : function(){
\r
5762 if(this.autoRefreshProcId){
\r
5763 clearInterval(this.autoRefreshProcId);
\r
5764 delete this.autoRefreshProcId;
\r
5769 isAutoRefreshing : function(){
\r
5770 return this.autoRefreshProcId ? true : false;
\r
5774 showLoading : function(){
\r
5775 if(this.showLoadIndicator){
\r
5776 this.el.update(this.indicatorText);
\r
5781 processSuccess : function(response){
\r
5782 this.transaction = null;
\r
5783 if(response.argument.form && response.argument.reset){
\r
5784 try{ // put in try/catch since some older FF releases had problems with this
\r
5785 response.argument.form.reset();
\r
5788 if(this.loadScripts){
\r
5789 this.renderer.render(this.el, response, this,
\r
5790 this.updateComplete.createDelegate(this, [response]));
\r
5792 this.renderer.render(this.el, response, this);
\r
5793 this.updateComplete(response);
\r
5798 updateComplete : function(response){
\r
5799 this.fireEvent("update", this.el, response);
\r
5800 if(typeof response.argument.callback == "function"){
\r
5801 response.argument.callback.call(response.argument.scope, this.el, true, response, response.argument.options);
\r
5806 processFailure : function(response){
\r
5807 this.transaction = null;
\r
5808 this.fireEvent("failure", this.el, response);
\r
5809 if(typeof response.argument.callback == "function"){
\r
5810 response.argument.callback.call(response.argument.scope, this.el, false, response, response.argument.options);
\r
5815 setRenderer : function(renderer){
\r
5816 this.renderer = renderer;
\r
5820 getRenderer : function(){
\r
5821 return this.renderer;
\r
5825 setDefaultUrl : function(defaultUrl){
\r
5826 this.defaultUrl = defaultUrl;
\r
5830 abort : function(){
\r
5831 if(this.transaction){
\r
5832 Ext.Ajax.abort(this.transaction);
\r
5837 isUpdating : function(){
\r
5838 if(this.transaction){
\r
5839 return Ext.Ajax.isLoading(this.transaction);
\r
5846 Ext.Updater.defaults = {
\r
5850 loadScripts : false,
\r
5852 sslBlankUrl : (Ext.SSL_SECURE_URL || "javascript:false"),
\r
5854 disableCaching : false,
\r
5856 showLoadIndicator : true,
\r
5858 indicatorText : '<div class="loading-indicator">Loading...</div>'
\r
5862 Ext.Updater.updateElement = function(el, url, params, options){
\r
5863 var um = Ext.get(el).getUpdater();
\r
5864 Ext.apply(um, options);
\r
5865 um.update(url, params, options ? options.callback : null);
\r
5868 Ext.Updater.BasicRenderer = function(){};
\r
5870 Ext.Updater.BasicRenderer.prototype = {
\r
5872 render : function(el, response, updateManager, callback){
\r
5873 el.update(response.responseText, updateManager.loadScripts, callback);
\r
5877 Ext.UpdateManager = Ext.Updater;
\r
5880 Ext.util.DelayedTask = function(fn, scope, args){
\r
5881 var id = null, d, t;
\r
5883 var call = function(){
\r
5884 var now = new Date().getTime();
\r
5886 clearInterval(id);
\r
5888 fn.apply(scope, args || []);
\r
5892 this.delay = function(delay, newFn, newScope, newArgs){
\r
5893 if(id && delay != d){
\r
5897 t = new Date().getTime();
\r
5899 scope = newScope || scope;
\r
5900 args = newArgs || args;
\r
5902 id = setInterval(call, d);
\r
5907 this.cancel = function(){
\r
5909 clearInterval(id);
\r