Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / jquery-bridge.html
1 <html>\r
2 <head>\r
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
4   <title>The source code</title>\r
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
7 </head>\r
8 <body  onload="prettyPrint();">\r
9     <pre class="prettyprint lang-js">if(typeof jQuery == "undefined"){
10     throw "Unable to load Ext, jQuery not found.";
11 }
12
13 (function(){
14 var libFlyweight;
15
16 Ext.lib.Dom = {
17     getViewWidth : function(full){
18         // jQuery doesn't report full window size on document query, so max both
19         return full ? Math.max(jQuery(document).width(),jQuery(window).width()) : jQuery(window).width();
20     },
21
22     getViewHeight : function(full){
23         // jQuery doesn't report full window size on document query, so max both
24         return full ? Math.max(jQuery(document).height(),jQuery(window).height()) : jQuery(window).height();
25     },
26
27     isAncestor : function(p, c){
28         var ret = false;
29             
30         p = Ext.getDom(p);
31         c = Ext.getDom(c);
32         if (p && c) {
33             if (p.contains) {
34                 return p.contains(c);
35             } else if (p.compareDocumentPosition) {
36                 return !!(p.compareDocumentPosition(c) & 16);
37             } else {
38                 while (c = c.parentNode) {
39                     ret = c == p || ret;                        
40                 }
41             }               
42         }   
43         return ret;
44     },
45
46     getRegion : function(el){
47         return Ext.lib.Region.getRegion(el);
48     },
49
50     //////////////////////////////////////////////////////////////////////////////////////
51     // Use of jQuery.offset() removed to promote consistent behavior across libs.
52     // JVS 05/23/07
53     //////////////////////////////////////////////////////////////////////////////////////
54
55     getY : function(el){
56         return this.getXY(el)[1];
57     },
58
59     getX : function(el){
60         return this.getXY(el)[0];
61     },
62
63     getXY : function(el) {
64         var p, pe, b, scroll, bd = (document.body || document.documentElement);
65         el = Ext.getDom(el);
66
67         if(el == bd){
68             return [0, 0];
69         }
70
71         if (el.getBoundingClientRect) {
72             b = el.getBoundingClientRect();
73             scroll = fly(document).getScroll();
74             return [Math.round(b.left + scroll.left), Math.round(b.top + scroll.top)];
75         }
76         var x = 0, y = 0;
77
78         p = el;
79
80         var hasAbsolute = fly(el).getStyle("position") == "absolute";
81
82         while (p) {
83
84             x += p.offsetLeft;
85             y += p.offsetTop;
86
87             if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
88                 hasAbsolute = true;
89             }
90
91             if (Ext.isGecko) {
92                 pe = fly(p);
93
94                 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
95                 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
96
97
98                 x += bl;
99                 y += bt;
100
101
102                 if (p != el && pe.getStyle('overflow') != 'visible') {
103                     x += bl;
104                     y += bt;
105                 }
106             }
107             p = p.offsetParent;
108         }
109
110         if (Ext.isSafari && hasAbsolute) {
111             x -= bd.offsetLeft;
112             y -= bd.offsetTop;
113         }
114
115         if (Ext.isGecko && !hasAbsolute) {
116             var dbd = fly(bd);
117             x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
118             y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
119         }
120
121         p = el.parentNode;
122         while (p && p != bd) {
123             if (!Ext.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
124                 x -= p.scrollLeft;
125                 y -= p.scrollTop;
126             }
127             p = p.parentNode;
128         }
129         return [x, y];
130     },
131
132     setXY : function(el, xy){
133         el = Ext.fly(el, '_setXY');
134         el.position();
135         var pts = el.translatePoints(xy);
136         if(xy[0] !== false){
137             el.dom.style.left = pts.left + "px";
138         }
139         if(xy[1] !== false){
140             el.dom.style.top = pts.top + "px";
141         }
142     },
143
144     setX : function(el, x){
145         this.setXY(el, [x, false]);
146     },
147
148     setY : function(el, y){
149         this.setXY(el, [false, y]);
150     }
151 };
152
153 // all lib flyweight calls use their own flyweight to prevent collisions with developer flyweights
154 function fly(el){
155     if(!libFlyweight){
156         libFlyweight = new Ext.Element.Flyweight();
157     }
158     libFlyweight.dom = el;
159     return libFlyweight;
160 }
161 Ext.lib.Event = {
162     getPageX : function(e){
163         e = e.browserEvent || e;
164         return e.pageX;
165     },
166
167     getPageY : function(e){
168         e = e.browserEvent || e;
169         return e.pageY;
170     },
171
172     getXY : function(e){
173         e = e.browserEvent || e;
174         return [e.pageX, e.pageY];
175     },
176
177     getTarget : function(e){
178         return e.target;
179     },
180
181     // all Ext events will go through event manager which provides scoping
182     on : function(el, eventName, fn, scope, override){
183         jQuery(el).bind(eventName, fn);
184     },
185
186     un : function(el, eventName, fn){
187         jQuery(el).unbind(eventName, fn);
188     },
189
190     purgeElement : function(el){
191         jQuery(el).unbind();
192     },
193
194     preventDefault : function(e){
195         e = e.browserEvent || e;
196         if(e.preventDefault){
197             e.preventDefault();
198         }else{
199             e.returnValue = false;
200         }
201     },
202
203     stopPropagation : function(e){
204         e = e.browserEvent || e;
205         if(e.stopPropagation){
206             e.stopPropagation();
207         }else{
208             e.cancelBubble = true;
209         }
210     },
211
212     stopEvent : function(e){
213         this.preventDefault(e);
214         this.stopPropagation(e);
215     },
216
217     onAvailable : function(id, fn, scope){
218         var start = new Date();
219         var f = function(){
220             if(start.getElapsed() > 10000){
221                 clearInterval(iid);
222             }
223             var el = document.getElementById(id);
224             if(el){
225                 clearInterval(iid);
226                 fn.call(scope||window, el);
227             }
228         };
229         var iid = setInterval(f, 50);
230     },
231
232     resolveTextNode: Ext.isGecko ? function(node){
233         if(!node){
234             return;
235         }
236         var s = HTMLElement.prototype.toString.call(node);
237         if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){
238             return;
239         }
240         return node.nodeType == 3 ? node.parentNode : node;
241     } : function(node){
242         return node && node.nodeType == 3 ? node.parentNode : node;
243     },
244
245     getRelatedTarget: function(ev) {
246         ev = ev.browserEvent || ev;
247         var t = ev.relatedTarget;
248         if (!t) {
249             if (ev.type == "mouseout") {
250                 t = ev.toElement;
251             } else if (ev.type == "mouseover") {
252                 t = ev.fromElement;
253             }
254         }
255
256         return this.resolveTextNode(t);
257     }
258 };
259
260 Ext.lib.Ajax = function(){
261     var createComplete = function(cb){
262          return function(xhr, status){
263             if((status == 'error' || status == 'timeout') && cb.failure){
264                 cb.failure.call(cb.scope||window, createResponse(cb, xhr));
265             }else if(cb.success){
266                 cb.success.call(cb.scope||window, createResponse(cb, xhr));
267             }
268          };
269     };
270     
271     var createResponse = function(cb, xhr){
272         var headerObj = {},
273             headerStr,              
274             t,
275             s;
276
277         try {
278             headerStr = xhr.getAllResponseHeaders();   
279             Ext.each(headerStr.replace(/\r\n/g, '\n').split('\n'), function(v){
280                 t = v.indexOf(':');
281                 if(t >= 0){
282                     s = v.substr(0, t).toLowerCase();
283                     if(v.charAt(t + 1) == ' '){
284                         ++t;
285                     }
286                     headerObj[s] = v.substr(t + 1);
287                 }
288             });
289         } catch(e) {}
290         
291         return {
292             responseText: xhr.responseText,
293             responseXML : xhr.responseXML,
294             argument: cb.argument,
295             status: xhr.status,
296             statusText: xhr.statusText,
297             getResponseHeader : function(header){return headerObj[header.toLowerCase()];},
298             getAllResponseHeaders : function(){return headerStr}
299         };
300     };
301     return {
302         request : function(method, uri, cb, data, options){
303             var o = {
304                 type: method,
305                 url: uri,
306                 data: data,
307                 timeout: cb.timeout,
308                 complete: createComplete(cb)
309             };
310
311             if(options){
312                 var hs = options.headers;
313                 if(options.xmlData){
314                     o.data = options.xmlData;
315                     o.processData = false;
316                     o.type = (method ? method : (options.method ? options.method : 'POST'));
317                     if (!hs || !hs['Content-Type']){
318                         o.contentType = 'text/xml';
319                     }
320                 }else if(options.jsonData){
321                     o.data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
322                     o.processData = false;
323                     o.type = (method ? method : (options.method ? options.method : 'POST'));
324                     if (!hs || !hs['Content-Type']){
325                         o.contentType = 'application/json';
326                     }
327                 }
328                 if(hs){
329                     o.beforeSend = function(xhr){
330                         for(var h in hs){
331                             if(hs.hasOwnProperty(h)){
332                                 xhr.setRequestHeader(h, hs[h]);
333                             }
334                         }
335                     }
336                 }
337             }
338             jQuery.ajax(o);
339         },
340
341         formRequest : function(form, uri, cb, data, isUpload, sslUri){
342             jQuery.ajax({
343                 type: Ext.getDom(form).method ||'POST',
344                 url: uri,
345                 data: jQuery(form).serialize()+(data?'&'+data:''),
346                 timeout: cb.timeout,
347                 complete: createComplete(cb)
348             });
349         },
350
351         isCallInProgress : function(trans){
352             return false;
353         },
354
355         abort : function(trans){
356             return false;
357         },
358
359         serializeForm : function(form){
360             return jQuery(form.dom||form).serialize();
361         }
362     };
363 }();
364
365 Ext.lib.Anim = function(){
366     var createAnim = function(cb, scope){
367         var animated = true;
368         return {
369             stop : function(skipToLast){
370                 // do nothing
371             },
372
373             isAnimated : function(){
374                 return animated;
375             },
376
377             proxyCallback : function(){
378                 animated = false;
379                 Ext.callback(cb, scope);
380             }
381         };
382     };
383     return {
384         scroll : function(el, args, duration, easing, cb, scope){
385             // scroll anim not supported so just scroll immediately
386             var anim = createAnim(cb, scope);
387             el = Ext.getDom(el);
388             if(typeof args.scroll.to[0] == 'number'){
389                 el.scrollLeft = args.scroll.to[0];
390             }
391             if(typeof args.scroll.to[1] == 'number'){
392                 el.scrollTop = args.scroll.to[1];
393             }
394             anim.proxyCallback();
395             return anim;
396         },
397
398         motion : function(el, args, duration, easing, cb, scope){
399             return this.run(el, args, duration, easing, cb, scope);
400         },
401
402         color : function(el, args, duration, easing, cb, scope){
403             // color anim not supported, so execute callback immediately
404             var anim = createAnim(cb, scope);
405             anim.proxyCallback();
406             return anim;
407         },
408
409         run : function(el, args, duration, easing, cb, scope, type){
410             var anim = createAnim(cb, scope), e = Ext.fly(el, '_animrun');
411             var o = {};
412             for(var k in args){
413                 switch(k){   // jquery doesn't support, so convert
414                     case 'points':
415                         var by, pts;
416                         e.position();
417                         if(by = args.points.by){
418                             var xy = e.getXY();
419                             pts = e.translatePoints([xy[0]+by[0], xy[1]+by[1]]);
420                         }else{
421                             pts = e.translatePoints(args.points.to);
422                         }
423                         o.left = pts.left;
424                         o.top = pts.top;
425                         if(!parseInt(e.getStyle('left'), 10)){ // auto bug
426                             e.setLeft(0);
427                         }
428                         if(!parseInt(e.getStyle('top'), 10)){
429                             e.setTop(0);
430                         }
431                         if(args.points.from){
432                             e.setXY(args.points.from);
433                         }
434                     break;
435                     case 'width':
436                         o.width = args.width.to;
437                         if (args.width.from)
438                             e.setWidth(args.width.from);
439                     break;
440                     case 'height':
441                         o.height = args.height.to;
442                         if (args.height.from)
443                             e.setHeight(args.height.from);
444                     break;
445                     case 'opacity':
446                         o.opacity = args.opacity.to;
447                         if (args.opacity.from)
448                             e.setOpacity(args.opacity.from);
449                     break;
450                     case 'left':
451                         o.left = args.left.to;
452                         if (args.left.from)
453                             e.setLeft(args.left.from);
454                     break;
455                     case 'top':
456                         o.top = args.top.to;
457                         if (args.top.from)
458                             e.setTop(args.top.from);
459                     break;
460                     case 'callback':
461                     case 'scope':
462                         // jQuery can't handle callback and scope arguments, so break here
463                     break;
464
465                     default:
466                         o[k] = args[k].to;
467                         if (args[k].from)
468                             e.setStyle(k, args[k].from);
469                     break;
470                 }
471             }
472             // TODO: find out about easing plug in?
473             jQuery(el).animate(o, duration*1000, undefined, anim.proxyCallback);
474             return anim;
475         }
476     };
477 }();
478
479
480 Ext.lib.Region = function(t, r, b, l) {
481     this.top = t;
482     this[1] = t;
483     this.right = r;
484     this.bottom = b;
485     this.left = l;
486     this[0] = l;
487 };
488
489 Ext.lib.Region.prototype = {
490     contains : function(region) {
491         return ( region.left   >= this.left   &&
492                  region.right  <= this.right  &&
493                  region.top    >= this.top    &&
494                  region.bottom <= this.bottom    );
495
496     },
497
498     getArea : function() {
499         return ( (this.bottom - this.top) * (this.right - this.left) );
500     },
501
502     intersect : function(region) {
503         var t = Math.max( this.top,    region.top    );
504         var r = Math.min( this.right,  region.right  );
505         var b = Math.min( this.bottom, region.bottom );
506         var l = Math.max( this.left,   region.left   );
507
508         if (b >= t && r >= l) {
509             return new Ext.lib.Region(t, r, b, l);
510         } else {
511             return null;
512         }
513     },
514     union : function(region) {
515         var t = Math.min( this.top,    region.top    );
516         var r = Math.max( this.right,  region.right  );
517         var b = Math.max( this.bottom, region.bottom );
518         var l = Math.min( this.left,   region.left   );
519
520         return new Ext.lib.Region(t, r, b, l);
521     },
522
523     constrainTo : function(r) {
524             this.top = this.top.constrain(r.top, r.bottom);
525             this.bottom = this.bottom.constrain(r.top, r.bottom);
526             this.left = this.left.constrain(r.left, r.right);
527             this.right = this.right.constrain(r.left, r.right);
528             return this;
529     },
530
531     adjust : function(t, l, b, r){
532         this.top += t;
533         this.left += l;
534         this.right += r;
535         this.bottom += b;
536         return this;
537     }
538 };
539
540 Ext.lib.Region.getRegion = function(el) {
541     var p = Ext.lib.Dom.getXY(el);
542
543     var t = p[1];
544     var r = p[0] + el.offsetWidth;
545     var b = p[1] + el.offsetHeight;
546     var l = p[0];
547
548     return new Ext.lib.Region(t, r, b, l);
549 };
550
551 Ext.lib.Point = function(x, y) {
552    if (Ext.isArray(x)) {
553       y = x[1];
554       x = x[0];
555    }
556     this.x = this.right = this.left = this[0] = x;
557     this.y = this.top = this.bottom = this[1] = y;
558 };
559
560 Ext.lib.Point.prototype = new Ext.lib.Region();
561
562 // prevent IE leaks
563 if(Ext.isIE) {
564     function fnCleanUp() {
565         var p = Function.prototype;
566         delete p.createSequence;
567         delete p.defer;
568         delete p.createDelegate;
569         delete p.createCallback;
570         delete p.createInterceptor;
571
572         window.detachEvent("onunload", fnCleanUp);
573     }
574     window.attachEvent("onunload", fnCleanUp);
575 }
576 })();</pre>    \r
577 </body>\r
578 </html>