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