Threaded View

  1. #1
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default [2.x, 3.x] ext-basex/$JIT Adapter extensions

    [2.x, 3.x] ext-basex/$JIT Adapter extensions


    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.

    License : GPL 3.0

    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.
    Code:
    Ext.lib.Ajax.onStatus([403,401],sessionTimeoutHandler,myApp)
    Alternatively, individual handlers may be assigned using the traditional Observable syntax:
    Code:
    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).
    Code:
    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:
    Code:
    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.
    HTML Code:
    <head>
    <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>
    </head>
    A simple Ajax debugging harness example:
    Code:
    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 for more details.

    Global forEach iterations:
    Code:
    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


    -- 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] 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:

      • hasActiveX
      • hasXDR
      • hasChromeFrame (Google IE Plugin for Webkit rendering engine)
      • hasFlash
      • hasCookies
      • hasCanvas
      • hasCanvasText
      • hasSVG
      • hasInputAutoFocus
      • hasInputPlaceHolder
      • hasXpath
      • hasWorkers
      • hasOffline
      • hasLocalStorage
      • hasGeoLocation
      • hasAudio
      • hasAudio.testMime (test for specific mime-type Support)
      • hasVideo
      • hasVideo.testCodec (test for specific Codec Support)
      • isEventSupported('load','img')

    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.

    Attached Files
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.