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  

    Lightbulb Want to Run Ext Without a Webserver ?

    Want to Run Ext Without a Webserver ?


    Backgrounder:

    HTTP Status codes are important. But, not always. Sometimes we'd like to deploy rich browser-based applications on local file systems (CD/DVD/Zips, iPhone) for demonstrations -- you name it. There are some quirks involved however -- more on those in a minute...

    AJAX frameworks that use the XMLHTTPRequest object (or IE's ActiveX equivalent) don't always account for this possibility in their implementations. Namely, accounting for the absence of a real HTTP status code, usually zero (0) when accessing a file:////based URL. But thats OK, we know the darn resource is there!

    So, (in conjunction with a completely file-system-based application I'm developing with Ext) I am happy to provide a nifty Ext-base override you might find useful. It is designed to solve a nasty IE7 problem and get Ext more 'portable'.

    First, the IE7 issue.
    Its latest XMLHTTPRequest implementation adds further restrictions with regard to local file access. Simply put, you can't use it for that purpose -- 'Access Denied'. But luckily the ActiveX interface is still available, which still imposes no such restrictions on that goal.

    The override below provides two significant features:
    1) Converts a zero (0) HTTP status to 200 (for all browsers).
    2) Gives the developer the choice of which IE7 AJAX implementation to use via a simple...
    Code:
    ...
    ,init:function(){
       Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:');/* or other true/false mechanism */
    ...
    }
    ...before the first Ext.Ajax.request. But it can also be toggled on/off at any time.

    The attached override provided is only designed to enhance the core 1.1 and 2.0 Ext-base adaptor. It does not modify the AJAX functionality of any of the other 'bridges' (YUI, Prototype, JQuery).


    I've attached a localXHR.js file that you can include anywhere after ext-base.js.

    8/10 Revision: I have extended this override further to support synchronous XHR requests as I've seen much demand for it of late. This also enhances the open, send error handling to raise appropriate exceptions when there is a security issue or other error. See a later post here on this thread on how a synchronous call can be made with little/no modification to your callbacks.

    My word about sync vs async AJAX:
    Rant: Async is the WAY TO GO ! This override maintains async behavior as the default premise for use within Ext. If you're designing your app for synchronous lockup -- you're just plain lazy, or can't/wont read about how to do it right.

    That said, there is one good reason (the only that I can think would matter) to do something sync, and that's loading dependent (with dependencies) javascript modules.

    [ UPDATE: 1/9/2008 ] Although this post will remain, localXHR is now deprecated in favor of Ext-basex (a newer, more complete implementation).

    [tags: XHR without webserver localXHR XHR xmlhttprequest synchronous IE7 basex ]
    Be Extatic,
    Attached Files
    Last edited by hendricd; 26 Feb 2008 at 9:41 AM. Reason: Added Opera Support, enhanced exception response.
    "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 User
    Join Date
    Apr 2007
    Posts
    4
    Vote Rating
    0
    original is on a distinguished road

      0  

    Default responseText / responseXml

    responseText / responseXml


    Hi,

    We've tried your workaround, but we noticed that in our case there's some additional step we had to take to get everything working in IE (6 or 7). While everything worked fine in Firefox, IE just wouldn't show any data. We started analyzing and found out that the recoredscount remained 0 in IE.

    Digging deeper we noticed that when trying to load the xml from the local file system, the responseText of the xhr response received, contained the XML text allright, but that for some reason the XML Document object - used as input for the XmlReader - in responseXML remained empty (childNodes.length == 0).

    The workaround for this particular issue was to add a forced load of the responseXML property using the responseText property as input.

    so in the 'handleTransactionResponse' function we added this :

    Code:
    if (httpStatus >= 200 && httpStatus < 300) {
                responseObject = this.createResponseObject(o, callback.argument);
    // START OF THE 
                   if(responseObject.responseXML.childNodes.length == 0 && responseObject.responseText)
                    {
                       // this covers IE scenario
                       if (window.ActiveXObject)
                       {
                           var xdoc=new ActiveXObject("Microsoft.XMLDOM");
                           xdoc.async="false";
                           xdoc.loadXML(responseObject.responseText);
                        }
                        // this is for non-IE browsers (just in case, as this change is  just to solve an IE issue
                        else
                        {
                         var parser=new DOMParser();
                         var xdoc=parser.parseFromString(responseObject.responseTextL,"text/xml");
                        }
    
                        responseObject.responseXML = xdoc;
                        }
    // END OF CHANGE
    With this change IE was happy and loaded the data.

    Has anyone else run into the same issue before ? Or did we miss somehting and is there a different, better, easier way to solvle this ?

    Thanks in advance for your feedback

  3. #3
    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  

    Wink Ah who needs XML anyway ?

    Ah who needs XML anyway ?


    Original,

    You're absolutely correct. I forgot to include my XML parser features in the override. With IE and the absence of a 'Content-Type' response header it does not create and parse the XML DOM for you.

    I have refactored the override to account for that and a couple of other issues.

    I've tested it X-browser on all the Ext XML examples. Looks good.

    Thanks for the try{}catch{} !
    "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 User
    Join Date
    Apr 2007
    Posts
    4
    Vote Rating
    0
    original is on a distinguished road

      0  

    Default


    Hendric,

    Thanks for adding the reason why the XML DOM stays empty (missing content-type when loading local files => no DOM initialization). I wasn't aware of this behaviour, so that's why at first I thought it might have something to do with the XML files we were trying to load or some other oversight on my part. Makes sense now. Thanks for that.

    Cheers

  5. #5
    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


    Yep, been dealing with XHR abtraction for a while now (years now I guess). Anyway, the override has just been further refactored to emulate 404 responses as well.


    Also,
    Make sure your static file content is saved with the desired content-encoding (eg 'utf-8', etc).
    "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.


  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    2
    Vote Rating
    0
    bmatzner is on a distinguished road

      0  

    Default


    Hi Doug, thanks a bunch for this solution - saved me from a lot of head-scratching. While we're at it, although this is not an ext question per se, but you're obviously very familiar with JS running locally off a CD: is there a way to get rid of IE's security warning when loading an HTML file with even the slightest bit of JS in it?

    Thanks,
    Bernd

  7. #7
    Ext JS - Development Team J.C. Bize's Avatar
    Join Date
    May 2007
    Location
    Bay Area, CA
    Posts
    179
    Vote Rating
    0
    J.C. Bize is on a distinguished road

      0  

    Default


    Quote Originally Posted by bmatzner View Post
    Hi Doug, thanks a bunch for this solution - saved me from a lot of head-scratching. While we're at it, although this is not an ext question per se, but you're obviously very familiar with JS running locally off a CD: is there a way to get rid of IE's security warning when loading an HTML file with even the slightest bit of JS in it?

    Thanks,
    Bernd
    this page should be a good place to start.

    Cheers,
    JC

  8. #8
    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  

    Arrow A simple Local File system example:

    A simple Local File system example:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
      <title>Display One's Self</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript" src="src/ext-base.js"></script>
    <script type="text/javascript" src="src/ext-core.js"></script>
    <script type="text/javascript" src="src/localXHR.js"></script>
    
    <script type="text/javascript">
    
    Ext.onReady(function(){
    
    	Ext.apply(String.prototype,{ escapeHTML: function() {
        var div = document.createElement('div');
        var text = document.createTextNode(this);
        div.appendChild(text);
        return div.innerHTML;
      }});
    	   var out = Ext.get("portal");
    
    	   out.getUpdateManager().setRenderer({render:function(el,response){
    				var text = String.format('Contents of {1}<hr /><pre><code>{0}</code></pre>',
    				     response.responseText.escapeHTML(), location.href);
    				el.update(text); }});
    
    
    	   out.load({
    	        url: location.href,  // lets just load ourself here, but disable scripts.
    	        scripts:false,
    			text: "Loading Myself for viewing (don\'t blink!)..."
       });
    
    });
    
    </script>
    
    
    </head>
    <body scroll="no">
    <div id="portal" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 300px;"></div>
    </body>
    </html>
    Just save it on your local file system somewhere and browse it.
    "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.


  9. #9
    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 Full example page can be run locally or via HTTP server.

    Full example page can be run locally or via HTTP server.


    As promised, a full-blown example of everything the override has to offer.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
      <title>Ext Ajax LocalXHR Test Suite</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="get-your-ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="get-your-ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="get-your-ext/ext-core.js"></script>
    <script type="text/javascript" src="localXHR.js"></script>
    <style type="text/css">
    
    html, body {
    border:0px none;
    font-family:tahoma;
    font-size:9pt;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    margin:0px;
    padding:0px;
    }
    .oops{
        width:100%;
    	border-style:none none solid;
        overflow:hidden;
    	 color:red;
    }
    
    .dandy{
        width:100%;
    
        overflow:hidden;
    	 color:green;
    }
    
    </style>
    <script type="text/javascript">
    var completionOrder=0;
    var url;
    
    Ext.apply(String.prototype,{ escapeHTML: function() {
        var div = document.createElement('div');
        var text = document.createTextNode(this);
        div.appendChild(text);
        return div.innerHTML;
      }});
    
    
    var dumpMeOut = function(el,response,um){
    	var nodeName= (response.responseXML && response.responseXML.firstChild)?response.responseXML.firstChild.nodeName:'null';
    
    	el.update( String.format('{0}: Contents of {1} <hr /><span class="status"> Waiting...</span><pre><code>{2}</code></pre>',
    		     el.dom.className + ":" + el.dom.id , response.options.url,
    		     'Response Headers:' + '<br />' + response.getAllResponseHeaders.replace('\n','<br />') + '<hr />' + response.responseText.escapeHTML()
    		     ),false);
    
    };
    
    var callHouston = function(response,options){
    	options.target.child('span.status').update("XHR Exception!, finished #"+(++completionOrder)).addClass('critical');
    };
    
    var allDone= function(elm, success, response){
    	var gotNodes = (response.responseXML && response.responseXML.childNodes.length != 0)?' and has XMLDOMDocument, firstChild: ' + response.responseXML.firstChild.nodeName:'';
    
    	var statusClass = success?'dandy':'oops';
    
    	var results= (success?'Finished #'+(++completionOrder) + gotNodes:
    		"HTTP Problem! ...but finished #" + (++completionOrder)) +
    		' with status= '+response.status + ', ' + response.statusText;
    
    	elm.child('span.status').update(results).addClass(statusClass);
    
    };
    
    var setHook =  function(el,all,index){
    			url || (url=location.href);
    			//url || (url='*find Ext*/examples/grid/plants.xml');
    			//url || (url='plain.txt');
    
    	   		var um = el.getUpdateManager();
    	   		um.setRenderer({render:dumpMeOut});
    	   		um.timeout = 10;
    
    			el.load({
    			        url: url
    			        ,async:el.hasClass('async')
    				,scripts:false
    				,target:el
    				,text: el.dom.className + ':' + el.dom.id +' Loading ' + url + ' for viewing (don\'t blink!)...<span class="status" > Waiting...<\/span>'
    				,callback:allDone
    				,failure:callHouston
    				,autoAbort:false
    				,disableCaching:true
    			});
    };
    
    
    Ext.onReady(function(){
    
    	Ext.select("div.async", true).each( setHook );
     	Ext.select("div.sync", true).each( setHook );
    
    });
    </script>
    
    </head>
    <body scroll="yes">
    <div id="about" class="dandy" style="border:2px solid green;overflow: auto; width: 665px;">
    <p>This is an Ext.AJAX demonstration page.  It is designed to allow implementors to see some of the
    notable differences in various browser implementations of the XMLHTTPRequest object in both synchronous
    and asynchronous request modes.<br /><br />It also demonstrates making Ext.AJAX.request(s) to access EITHER local-file-system-based/HTTP Server
    resources when used with the override 'localXHR.js' provided <a href="http://extjs.com/forum/showthread.php?t=10672" target="_ExtForum">here</a>.
    <br /><br />Hints:<ul><li>Change the class name of the "portal" divs to control async vs synch behaviors.<li>Also make a note of
    how each browser implements the response.responseXML DOMDocument rather differently (especially .firstChild).<li>
    Change the url variable to play with different resource types; the contents of this page is the current default.</ul><br />
    Override Tested on:  IE6, IE7, FF(1,2), Opera 9.22
    </div>
    <div id="portal-1" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
    <div id="portal-2" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
    <div id="portal-3" class="sync" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
    <div id="portal-4" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
    <div id="portal-5" class="async" style="border:2px solid #99bbe8;overflow: auto; width: 665px; height: 120px;"></div>
    </body>
    </html>
    "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
    Aug 2007
    Posts
    183
    Vote Rating
    0
    deitch is on a distinguished road

      0  

    Default localXHR.zip

    localXHR.zip


    Doug,

    For some reason, the forum isn't giving me access to localXHR.zip. Can you post it on the Web somewhere, or put the source code in?

    Thanks.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar