1. #1
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    290
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Question ext.direct and AIR

    ext.direct and AIR


    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?

  2. #2
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Location
    Iran
    Posts
    159
    Vote Rating
    0
    vahid4134 is on a distinguished road

      0  

    Default


    Because you want to load js file from domain you must use non-application sandbox
    No honor is like knowledge

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,240
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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);
    	}
    });
    Aaron Conran
    @aconran
    Sencha Architect Development Team