View Full Version : [2.x, 3.x] ext-basex/$JIT Adapter extensions

29 Oct 2009, 9:16 AM
ext-basex 4.0 available.

ext-basex 3.0 (and above) is now available on Google Code (http://code.google.com/p/ext-basex/) (SVN (http://code.google.com/p/ext-basex/source/browse)).

A demonstration (http://demos.theactivegroup.com/?demo=basex&script=flickr) of ext-basex/$JIT in action.

License : GPL 3.0

The attached script file adds:

new lib.Ajax features (some were already available here (http://extjs.com/forum/showthread.php?p=52350#post52350)( in localXHR.js)
cross-Browser Function/Array/String/Object iteration (compatible with Javascript 1.6s' Array.forEach).

New config options (can be passed down from a higher level (ie. Ext.data.Connection) implementation.):
async : true/false, // Synchronous Request support.
userId: 'JohnDoe', // HTTP Authentication available on each request
queue : {name: 'chat', priority : 1 } //dynamic queue creation

Ajax Requests can also be made without a web-server (ie local file systems) via HTTP-Status-200 emulation.

Ext.lib.Ajax joins the Ext Event system (implements util.Observable). The following events added:

request - (cancellable) Raised just before any passed headers, post content have been serialized.
beforesend - (cancellable) Raised just after all headers, parameters, and content have been serialized and just before the XHR.send occurs.
response - (cancellable) Raised after any response is received, but before any of the success/failure callbacks are made. (Use this to intercept each response for debugging, etc)
exception - (cancellable) Raised after any non-successful HTTP status is recieved, but before any of the other internal success/failure callbacks are made.
abort - Raised any time a forceful abort is issued
timeout - Raised any time an asynchronous request times out.
readystatechange - Raised each time the XHR objects' readyState changes
status:n - Raised anytime a specific httpStatus is returned by the requested server

onStatus/unStatus Event methods. Specific HTTP Status codes may be trapped via cancelable eventListeners. Returning false from an onStatus Handler prevents further function calls/events from being made by the Ajax request stack.

Ext.lib.Ajax.onStatus([403,401],sessionTimeoutHandler,myApp)Alternatively, individual handlers may be assigned using the traditional Observable syntax:

Ext.lib.Ajax.on('status:403', sessionTimeoutHandler, myApp); Note: Ext.lib.Ajax is still implemented as a singleton object, thus any event handlers defined at this level are global to all Ajax requests.

For IE7, optionally force the older ActiveX XMLHttpRequest implementation (permits local file access for IE7).
Ext.lib.Ajax.forceActiveX = true;

Replaceable Form encoder support. The Form-POST/Parameter encoding function may be changed at runtime to support non-standard (other than the default: encodeURIComponent) character encoding/encryption:

Ext.lib.Ajax.encoder = escape;
Ext.lib.Ajax.encoder = myEncoderFn; //function that returns an encoded string
Then, any form serialized by Ext.lib.Ajax.serializeForm can use a custom encoding strategy.

Proper library placement is key. In order for lib.Ajax to get Observable support, ext-basex.js must be placed after the ext-base.js adapter and the Ext javascript module that provides Ext.util.Observable. For most installations, this will be either ext-all[-debug].js or ext-core.js. Including it before these modules (although fully functional) will not permit lib.Ajax to generate the events described above.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your Page for ExtJs 3.0</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../ext-basex[-debug].js"></script>
<!-- or (not both!) both ext-basex and JIT: -->
<script type="text/javascript" src="../jitx[-debug].js"></script>
A simple Ajax debugging harness example:

var log = Ext.log;
var AjaxDebugger = {
request: function( connection, method, url, callback, postData, options ){log(['request',url,postData]);}
,response: function( connection, response, callback, isAbort) { log(['response',response.responseText]);}
,exception: function( connection, response, callback, isAbort) { log(['HTTPException', connection.fullStatus.statusText ]);}
,abort : function(){log('Request was aborted');}
,timeout : function(){log('Request timed out');}
,readystatechange : function(connection){ log('readystatechange', connection.conn.readyState);}
Ext.lib.Ajax.on(AjaxDebugger );
Ext.lib.Ajax.suspendEvents() / resumeEvents() to suppress/enable events.
Note: In this version, the request method (GET, POST, PUT, DELETE, and other HTTP verbs) specified by the options.method config takes precedence over any method derived by the Ajax stack .

lib.Ajax Request Queues. Ajax requests can now be made with named queues; each with specific execution priority. See this post (http://extjs.com/forum/showthread.php?p=140474#post140474)for more details.

Global forEach iterations:

forEach([1,2,3],console.log); or [1,2,3].forEach(console.log); //Gecko already has the later form.
"This is a test".forEach(console.log); or forEach("This is a test",console.log); //character enumeration

-- adds Ext.clone(deep) method. Clone anything (string, number,date, arrays, even complex objects)!
-- new Array prototypes: atRandom, unique, map, include, filter, compact, flatten, forEach, clone

10/28/2009 -- ext-basex 4.0 and $JIT 1.2 are now shipped with debug versions, jsb2 build support, and Ext Core 3 compatibility.

Detect HTML 5 Capabilities:

Ext.capabilities object (singleton) reports detected browser capabilities:

hasChromeFrame (Google IE Plugin for Webkit rendering engine)
hasAudio.testMime (test for specific mime-type Support)
hasVideo.testCodec (test for specific Codec Support)

Update: A quick Tutorial on how to use $JIT is also available here (http://extjs.com/forum/showthread.php?p=377251#post377251).

Download Note: the current vBulletin config gzips attachments which [U]IE hates. Download this with Firefox (or other browser) instead of IE.

25 Nov 2009, 9:21 AM
Kick ass work doug!

26 Nov 2009, 4:58 AM

31 Dec 2009, 3:39 AM
Great work.

I ran across the following using Ext 3.1/IE8:

Ext.element.uncache is null or not an object

Reviewing source, Ext.element.uncache was removed in 3.x

16 Mar 2010, 6:00 AM
Does buying developer seats for one version give you access to the other versions.
For example, we recently updated to 3.0 of ExtJS, so updated to 3.X of basex. We need to buy developer seats before we make a customer delivery, but I see that basex vs. 4 is out. If we buy licenses to 4, do we by default also have licenses for 3?


17 Mar 2010, 2:05 PM
Does buying developer seats for one version give you access to the other versions.
For example, we recently updated to 3.0 of ExtJS, so updated to 3.X of basex. We need to buy developer seats before we make a customer delivery, but I see that basex vs. 4 is out. If we buy licenses to 4, do we by default also have licenses for 3?


@jpphillips --

basex licenses are perpetual (issued without regard to current/past/future releases).

17 Oct 2013, 1:55 AM
Hello together, I need help with this library add issue to ExtJs:

This is what I am using:

ext-base.js (extjs 3.0)

When I try to use infovis which is in JIT JavaScript, I get this error:
ReferenceError: $jit is not defined

I would like to use ExtJs 3 with JIT for making some nice visualization. I tried Raphael.js and it is very nice but there isn't many examples in the internet like InfoVis where I found so much stuff about this.