ext.direct and AIR

**Stju** · 29 Dec 2009 10:42 AM

Hello!
Has anybody tried application to work with ext.direct libraries?
I'm on the way to porting my web application to AIR, but stuck now a little..
HTML part as follows:

Code:

<script type="text/javascript" src="http://here.my.web.hostname/ext_direct/api.php"></script>

Javascript part, again everything more, less standard:

Code:

Ext.Direct.addProvider(Ext.app.REMOTING_API);

Code works flawlessly in browser, but in AIR application same code throwing an error

Code:

Type Error: Result of expression 'provider' [undefined] is not an object.

Error happens in ext-debug.js line 22322..
Any advice or solution would be greatly appreciated. Maybe due to weird sandboxing issues of this AIR platform use of direct classes is impossible?

**khebs@live.com** · 29 Dec 2009 7:10 PM

Hi Stju, the error your having might be related to cache?

This is for code embed style or code ondemand, might help someone, what i did is to create a DOM element for a childSandbox bridge, with eval in it.. ill try to digg in to the codes since im in Titanium now.

heres how i got it.. the Childsandbox script, i named it ChildSandbox, the Namespace is just like Ext.ns

Code:

/**
 * ChildSandbox
 *
 * @author      khebs
 * @email       khebs@live.com
 * @date        December 10, 2009
 * @version     0.1a
 * @singleton
 *
 */

Namespace('Base.ChildSandbox');

Base.ChildSandbox = {
  /**
   * The IFRAME Dom Element
   * @type object
   *
   *
    <iframe id="sandbox"
      style="display:none"
      sandboxRoot='http://www.example.com/'
      documentRoot="app:/"
      allowCrossDomainXHR="true"></iframe>
   *
   */
  dom: Ext.DomHelper.append(Ext.getBody(), {
    id: 'child-sandbox',
    tag: 'iframe',
    style: 'display:none;',
    sandboxRoot: 'http://www.example.com/',
    src: 'Base/assets/child.html',
    documentRoot: 'app:/',
    allowCrossDOmainXHR: 'true'
  }),

  /**
   * Get Bridget ChildSandBoxBridge
   * @public
   */
  getBridge: function()
  {
    return this.dom.contentWindow.childSandboxBridge;
  }
};

and then you will need the the html for the childsandbox, child.html

Code:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../libraries/frameworks/ext/release/ext-base.js"></script>
    <script type="text/javascript" src="../libraries/frameworks/ext/release/ext-all.js"></script>
    <script>

      var bridge = {
        eval: function(source, scope) 
        {
          try {
            return eval.call(scope, source);
          } catch(e) {
            return e;
          }
        }
      };

      window.childSandboxBridge = bridge;
    </script>
  </head>
  <body>
    TODO write content
  </body>
</html>

And how to execute the code..

Code:

// Specify Handlers for Success & Failure
    var success_handler = Base.util.isDefined(config.success) ? config.success : function(){};
    var failure_handler = Base.util.isDefined(config.failure) ? config.failure : function(){};

    // Call Ajax Request
    Ext.Ajax.request({
      method: 'POST',
      url: Base.Module.System.Preferences.Data.API_ADDRESS,
      
      // onSuccess Event Handler
      success: function(r)
      {
        var result = r.responseText;

        // bind the resulting
        DirectAPI.API.provider = Base.ChildSandbox.getBridge().eval(result);

        try
        {
          // Add a Direct API, accessable using DirectAPI.API.<API>
          Ext.Direct.addProvider(DirectAPI.API.provider);
          // Bind Exception Event Listener
          Ext.Direct.on('exception', function(e){
            MessageBox.show({
              title : 'DirectAPI Exception',
              msg   : Ext.encode(e),
              icon  : MessageBox.MINUS
            });
            failure_handler(config, 'Trace Error: ' + e);
          });
          // Calls the Success Handler
          success_handler();
        }
        catch(err)
        {
          // Calls the Failure Handler when catched error
          failure_handler(config, err);
        }
      },

      // onFailure Event Handler
      failure: function(r)
      {
        // Calls the Failure Handler when catched error
        failure_handler(config, r.responseText);
      }
    });

There is a better way "maybe" but for now, this codes just works..
Hope this helps..

**vahid4134** · 30 Dec 2009 9:53 AM

Because you want to load js file from domain you must use non-application sandbox

**aconran** · 19 Jan 2010 6:34 PM

Newer versions of the Ext.Direct server-side stacks allow you to specify a URL parameter of format=json.

This will allow you to add Ext.Direct providers through a cross domain XHR and inside the application sandbox.

Code:

Ext.Ajax.request({
	url: "/api.php?format=json",
	success: function(response, opts) {
		var o = Ext.decode(response.responseText);
		Ext.Direct.addProvider(o);
	}
});

ext.direct and AIR

Thread Tools

Search Thread

Display

ext.direct and AIR

ext.direct and AIR