Hybrid View

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

      0  

    Default [ext-basex/$JIT 4.0 adapter extensions] Ajax enhancements and more.

    [ext-basex/$JIT 4.0 adapter extensions] Ajax enhancements and more.


    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.
    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 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:
    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[ 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:
    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


    [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.
    Attached Files
    Last edited by hendricd; 18 Nov 2009 at 8:39 AM. Reason: 4.0/$JIT released
    "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.


  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Thumbs up


    Good !
    I if can add a suggestion :

    PHP Code:
    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'thisthis.transId);
        }
    }}); 
    I personnally use this function/event for a "cancel" button.

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

      0  

    Default


    @tof - Yes, although that is for (Ext.data.Connection) the next-level up in the stack, it's a useful addition (also found here).
    "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.


  4. #4
    Ext JS Premium Member prophet's Avatar
    Join Date
    Mar 2007
    Location
    Greenwich, CT
    Posts
    187
    Vote Rating
    0
    prophet is on a distinguished road

      0  

    Default


    Great stuff! I think this will come in handy.
    Brad Baumann

  5. #5
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent work!!

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

    Thanks for share!!

  6. #6
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    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!

  7. #7
    Sencha User
    Join Date
    Apr 2007
    Location
    Portland, Oregon
    Posts
    63
    Vote Rating
    0
    daemach is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    16
    Vote Rating
    0
    radio1 is on a distinguished road

      0  

    Default


    Wow -- thanks VERY MUCH from me also hendricd -- your code makes session timeouts a breeze to handle.

    In my application, I simply included "ext-basex-min.js" as described above, and then added a single call to Ext.lib.Ajax.onStatus(...) also as described above. This works very great for handling session timeouts reported by my server-side code.

    However, please note the following bug and (hopefully sound) fix I implemented. My code is far too large to post here, but I'll describe the problem as best I can.

    My application contains a GridPanel populated by a JsonStore. User clicks on other elements on the screen trigger the JsonStore (and therefore the GridPanel) to reload with applicable data from the server. It's very possible for a user to trigger the reloading of the JsonStore before a previous load was completed. This worked fine without the "ext-basex-min.js" in my app, but including that file (without even calling anything in it) caused IE6 & 7 to trigger a JavaScript error in this situation. Firefox still worked fine though.

    My fix involves moving a single line of code into an existing try/catch block as indicated in these snippets.

    Old:
    Code:
        createResponseObject:function(o, callbackArg){
            var obj = {};
            var headerObj = {},headerStr='';
    
            try{  //to catch bad encoding problems here
                obj.responseText = o.conn.responseText;
            }catch(e){obj.responseText ='';}
    
            obj.responseXML = o.conn.responseXML;
    
            try{
                headerStr = o.conn.getAllResponseHeaders()||'';
            } catch(ex){}
    New:
    Code:
        createResponseObject:function(o, callbackArg){
            var obj = {};
            var headerObj = {},headerStr='';
    
            try{  //to catch bad encoding problems here
                obj.responseText = o.conn.responseText;
            }catch(e){obj.responseText ='';}
    
            try{
                obj.responseXML = o.conn.responseXML;
                headerStr = o.conn.getAllResponseHeaders()||'';
            } catch(ex){}
    This seems to meet the need in my app, but maybe there's a better fix?
    Questions and comments are very welcome!

    Thanks again,
    -radio1

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

      0  

    Default


    @radio1 -- Thanks for the feedback!

    Could you tell me what the exception raised by IE was?

    Further, could you post the handler used to call the store.load? Was it called asynchronously?

    Was: Ext.lib.Ajax.forceActiveX == true ??


    Thanks.
    "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.


  10. #10
    Ext User
    Join Date
    Oct 2007
    Posts
    16
    Vote Rating
    0
    radio1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by hendricd View Post
    @radio1 -- Thanks for the feedback!

    Could you tell me what the exception raised by IE was?

    Further, could you post the handler used to call the store.load? Was it called asynchronously?

    Was: Ext.lib.Ajax.forceActiveX == true ??

    Thanks.
    The message in IE is the usual "Problems with this Web page might prevent it from being displayed properly....." popup with the following details:

    Line: 236
    Char: 9
    Error: Unspecified error.
    Code: 0
    URL: 'myurl'

    Note that I isolated the cause of the problem to simply including either "ext-basex.js" (or "ext-basex-min.js") via a <script> tag in my source HTML file (even without actually calling Ext.lib.Ajax.onStatus(...) or referencing any other code in your extension), so Ext.lib.Ajax.forceActiveX was untouched.

    As for my JsonStore-related code, my code only ever calls JsonStore.reload() (not .load()). Yup, the calls are asynchronous, and the problem occurred when a second ajax request was sent by the JsonStore while a previous request was still outstanding (the first response was not yet fully received).

    For posterity, here's a simplified version of my JsonStore instantiation code -- simplified only by shortening the values assigned to the config options (those are all of the config options I use). I also do some screen-only cosmetic stuff in the event handlers shown (no ajax stuff).
    Code:
    jsonDs = new Ext.data.JsonStore({
    	url:'myurl',
    	baseParams: {cmd:'get'},
    	root:'items',
    	fields:[...aBunchOfFields...]
    });
    jsonDs.setDefaultSort(...);
    jsonDs.on("beforeload", onStoreLoading, this);
    jsonDs.on("datachanged", onStoreChanged, this);
    Thanks much again -- please let me know if I can be of any further help. Questions and comments are always welcome.
    -radio1

Thread Participants: 82

  1. galdaka (1 Post)
  2. Digital God (3 Posts)
  3. prophet (1 Post)
  4. alayasf (2 Posts)
  5. tof (1 Post)
  6. stever (3 Posts)
  7. mystix (4 Posts)
  8. fangzhouxing (6 Posts)
  9. ludoo (1 Post)
  10. KRavEN (4 Posts)
  11. DigitalSkyline (3 Posts)
  12. daemach (1 Post)
  13. violinista (1 Post)
  14. mlarese (1 Post)
  15. walker_cn (4 Posts)
  16. stevebla (4 Posts)
  17. Chris in Cambridge (1 Post)
  18. mjlecomte (2 Posts)
  19. ZooKeeper (10 Posts)
  20. brookd (1 Post)
  21. fermo111 (6 Posts)
  22. kevinwu8 (1 Post)
  23. Spirit (3 Posts)
  24. jerrybrown5 (4 Posts)
  25. lvanderree (8 Posts)
  26. Makor (4 Posts)
  27. yanick (1 Post)
  28. wm003 (10 Posts)
  29. radio1 (3 Posts)
  30. jphillips (2 Posts)
  31. markpele (2 Posts)
  32. Romantik (1 Post)
  33. Sander_S (4 Posts)
  34. maximumcoder (2 Posts)
  35. NotChris (6 Posts)
  36. ritchrs (2 Posts)
  37. sksoft (2 Posts)
  38. jvanantwerp (2 Posts)
  39. jfa (2 Posts)
  40. BlueCamel (1 Post)
  41. ClemsonJeeper (3 Posts)
  42. sp797 (1 Post)
  43. mahesh122 (2 Posts)
  44. zombeerose (12 Posts)
  45. jlowe (2 Posts)
  46. bt_bruno (2 Posts)
  47. pompom (4 Posts)
  48. Eric24 (18 Posts)
  49. baumschule (3 Posts)
  50. coderobo (3 Posts)
  51. krause (1 Post)
  52. mubenchi (1 Post)
  53. mrkadakia (3 Posts)
  54. tomim (4 Posts)
  55. canxss (2 Posts)
  56. tasman (3 Posts)
  57. mrsunshine (4 Posts)
  58. Trinad (2 Posts)
  59. jasonb885 (2 Posts)
  60. wki01 (5 Posts)
  61. mschwartz (2 Posts)
  62. sarathy (2 Posts)
  63. jdurante (1 Post)
  64. TomChiverton (1 Post)
  65. sumit.madan (2 Posts)
  66. Riemi (4 Posts)
  67. Henrik Rutzou (3 Posts)
  68. hairinwind (1 Post)
  69. gzlizp (1 Post)
  70. yuanqixun (2 Posts)
  71. larryaubstore (2 Posts)
  72. wupeng (2 Posts)
  73. blueram (1 Post)
  74. ronivcp (1 Post)
  75. t00bs (2 Posts)
  76. hyponym (4 Posts)
  77. mg2468 (3 Posts)
  78. scaddenp (1 Post)
  79. faith wins (3 Posts)
  80. aratcliffe (8 Posts)
  81. jhashe (3 Posts)
  82. jaufgang (1 Post)

Tags for this Thread