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

      0  

    Question 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
    166
    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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    140
    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