Ext

hendricd · #1 12-26-2007, 05:00 PM

ext-basex 4.0 available.

ext-basex 3.0 (and above) is now available on Google Code (SVN).

A demonstration of ext-basex/$JIT in action.

Ext-Base adapter extensions v2.3 (LGPL), 3.x (GPL).

The attached script file adds:

new lib.Ajax features (some were already available here( in localXHR.js)
cross-Browser Function/Array/String/Object iteration (compatible with Javascript 1.6s' Array.forEach).

Ext.lib.Ajax.
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
password:'inTheClear',
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;
or
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.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your Page for ExtJs 2.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.js"></script>
</head>

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[ new for 2.3 ]. Ajax requests can now be made with named queues; each with specific execution priority. See this post 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.
forEach(object,console.log);
"This is a test".forEach(console.log); or  forEach("This is a test",console.log); //character enumeration

[Update] 11/10/2008 -- ext-basex 3.1 now:
-- includes $JIT. Read more about it here.
-- 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

[Update] 6/3/2009 -- ext-basex 3.4RC1 (for Ext 2.x, 3.x) is now available. See the Ext 3.0 extensions thread for more on new features.

[Update] 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.

Update: A quick Tutorial on how to use $JIT is also available here.

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

tof · #2 12-27-2007, 04:34 AM

Good !
I if can add a suggestion :


Ext.Ajax.addEvents({requestaborted:true});

Ext.override(Ext.data.Connection, {

abort : function(transId){

    if(transId || this.isLoading()){

        Ext.lib.Ajax.abort(transId || this.transId);

        this.fireEvent('requestaborted', this, this.transId);

    }

}});

I personnally use this function/event for a "cancel" button.

hendricd · #3 12-27-2007, 09:01 AM

@tof - Yes, although that is for (Ext.data.Connection) the next-level up in the stack, it's a useful addition (also found here).

prophet · #4 12-29-2007, 04:07 PM

Great stuff! I think this will come in handy.

galdaka · #5 12-29-2007, 06:40 PM

Excellent work!!

@Ext team: Part of this features will be included in future versions of Ext?

Thanks for share!!

DigitalSkyline · #6 12-31-2007, 12:22 PM

Thanks, this is proving to be both useful and necessary for handling session timeouts... great!

... only problem I foresee is having to recode if this stuff gets in to Ext 2+...
well such is life.

PS Doug - have you always coded with preceding commas? Just a minor annoyance, To each their own!

DigitalSkyline · #7 12-31-2007, 04:16 PM

Doug -
I'm trying to override the default behavior on a single request

Doing this doesn't seem to work:
Ext.lib.Ajax.onStatus([403,401],sessionTimeoutHandler,myApp)

later:
Ext.lib.Ajax.unStatus([403,401]) //didn't fix it
Ext.lib.Ajax.onStatus([403,401],anotherTimeoutHandler,myApp)

still calling sessionTimeoutHandler ...

Any idea why?

hendricd · #8 12-31-2007, 04:34 PM

You'll need to treat it like any other 'un':

Ext.lib.Ajax.unStatus([403,401],sessionTimeoutHandler,myApp)

Ultimately, EventManager needs the same listener signature to unSet it.

DigitalSkyline · #9 12-31-2007, 04:41 PM

Thanks, thought it might be something like that.

daemach · #10 01-07-2008, 04:32 PM

What a great utility - thanks for making it available. This is exactly what we needed!

Ext

Ext JS

Ext GWT

Ext Core

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help