Ext "Flash-enhanced" connections for Cross-domain access

About

This demo uses F4A, a SWF which allows you to make the equivalent of XHR's via flash (leveraging Flash's HTTP requests) to access cross-domain URL's (as long as the appropriate crossdomain.xml file permits it).

I use F4A with a small wrapper (see all attachments below) and set up an instance on the page. I then extend the Ext connection in a way that lets you specify flashProxy as an attribute of the Ext.data.HttpProxy to use flash to make the requests.

For some reason, it doesn't work all the time with XML documents (I'm sure it's my faulty parsing logic as I try to do a Javascript-base creation of the DOM Document based on the text payload I get as a callback from Flash.)

The other challenge is that I had to add a "beforeload" event whenever the flashProxy is used, to avoid a race condition when things are set up. If the flash proxy is not fully set up yet, I create a closure with the load() call being run, and return false to prevent it from running. I setTimeout/defer it to call my closure method in 200 ms. This would repeat until the flash is initialized, but it's usually a sub-second operation.

Actual Demo

Demo Grid

Demo: Source Code

<!--
      * Set NOAUTOLINK = on
-->
<script src="http://www.cachefile.net/scripts/ext/2.0.1/adapter/yui/yui-utilities.js"></script>
<script src="http://www.cachefile.net/scripts/ext/2.0.1/adapter/yui/ext-yui-adapter.js"></script>
<link rel="stylesheet" href="http://www.cachefile.net/scripts/ext/2.0.1/resources/css/ext-all.css">
<script src="http://www.cachefile.net/scripts/ext/2.0.1/ext-all.js"></script>
<script src="%PUBURL%/%WEB%/%TOPIC%/swfobject.js"></script>
<script src="%PUBURL%/%WEB%/%TOPIC%/f4a_js.js"></script>
<script>
// since the swf is a wiki attachment, I made the Ext extension "absorb" the variable...
var _SWF_URI='%PUBURL%/%WEB%/%TOPIC%/f4a.swf';
</script>
<script src="%PUBURL%/%WEB%/%TOPIC%/Ext.FlashProxySupport.js"></script>

<script>
var response;


var reader=new Ext.data.JsonReader({
       root:'ResultSet.Result'
       },
         [
            {name: 'Title', mapping: 'Title'},
            {name: 'Summary', mapping: 'Summary'},
           {link: 'Url', mapping: 'Url'},
            {name: 'Thumbnail', mapping: 'Thumbnail'}
        ]);


var store= new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url: 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch',
             flashProxy: true,
                method:"GET"
}), 
 baseParams:{appid:'YahooDemo', output:'json'},
reader:reader
});

var grid="";

function renderThumb(v){
   return "<img src='"+v.Url+"' height='80' />";
}

var cm=new Ext.grid.ColumnModel([
  {header:'Title', dataIndex:'Title'},
  {header:'Thumbnail', dataIndex:'Thumbnail', renderer:renderThumb},
  {header:'Summary', dataIndex:'Summary'}
]);
cm.defaultSortable=true;



Ext.onReady(function(){

 var grid=new Ext.grid.GridPanel({ 
 sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
 store:store, 
loadMask:true,
 cm:cm,width:700,height:500,
 renderTo:'grid', title:'Search Items', frame:true
});


});

Ext.onReady(function(){store.load({params:{ query:'Jack Slocum'}});});

File Attachments