1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    30
    Vote Rating
    1
    Answers
    1
    LeonM is on a distinguished road

      0  

    Default Answered: Delay app init until Ext.direct API is loaded

    Answered: Delay app init until Ext.direct API is loaded


    I use Ext.direct to implement a third party API. The server configuration (list of exposed methods to the client) gets downloaded through AJAX, like this:

    PHP Code:
    Ext.Ajax.request({
        
    url'http://my.api.com/api/',
        
    success: function (responseopts) {
            var 
    api_specs Ext.decode(response.responseText);

            
    Ext.direct.Manager.addProvider({
                
    type'direct'
                 namespace: 
    'my_api',
                
    url'http://my.api.com/api/',
                
    actionsapi_specs
            
    });
    }}); 
    The problem here is that the API specification is loaded asynchronously, so whenever I try to use the API, like this:

    PHP Code:
    xtype'form',
    api: {
         
    submit'my_api.user.login'

    I get an error, because Ext tries to instantiate the form before the API method specification finishes loading.

    So, I am looking for some way to 'delay' the instantiation of my app until the API is fully loaded. In Ext3 I would probably fire an event after the API loads and then nest a listener within Ext.onReady() or something like that, but I'm not sure how to do it in Ext4...

    According to the docs, Ext.Application() gets launched "after the page is ready", so I guess that is the same as good old Ext.onReady()? So maybe I could somehow alter this behavior to launch it after the page is ready AND my API is loaded?

    Or can I use the Ext.loader in some way perhaps?

  2. My solution was not as good as I thought, I still ended up with classes instantiated before the API was fully loaded. I found a better way to do it.

    - Removed all controllers from Ext.application(), except for the one responsible of loading the API
    - Created all other controllers in the callback function of the API controller function after load.

    Like this:
    PHP Code:
    Ext.application({
        
    name'MyApp',
        
    controllers: ['api'],
        
    autoCreateViewporttrue
    }); 
    And the controller:

    PHP Code:
    Ext.define('MyApp.controller.api', {
        
    extend'Ext.app.Controller',
        
    init: function () {
            
    Ext.Ajax.request({
                
    //Fetch the API descriptor
                
    url'http://myapp/api/',
                [...]
                
    scopethis,
                
    successthis.callBack,
            });
        },
        
        
    callBack: function(responseopts){
            [..
    process ajax response..]
            
    this.getController('Workspace');
            
    this.getController('Workspace').init();
            
    this.getController('Login');
            
    this.getController('Login').init();
        }
    }) 
    I hope this might help someone else having a similar situation. Having to work through the weekend to meet a deadline is something I wouldn't wish on anyone

  3. #2
    Sencha User
    Join Date
    Jun 2010
    Posts
    30
    Vote Rating
    1
    Answers
    1
    LeonM is on a distinguished road

      0  

    Default


    Got it!


    - Removed views and autoCreateViewport configs from Ext.application to make sure nothing gets loaded that depends on the API definition
    - called api loader function from Ext.application.launch()
    - added listener to event from the API loader after provider was added, which builds the viewport
    - Ext.loader does the rest from there

    PHP Code:
    Ext.direct.Manager.addProvider({
        [...]
    });
    Ext.direct.Manager.fireEvent('api_load'); 
    PHP Code:
    Ext.application({
        
    name'MyApp'
        
    controllers: ["api"], 
        
    launch: function(){
            
    Ext.direct.Manager.on('api_load', function (){
                 
    Ext.create('MyApp.view.Viewport');
            });
            
    Ext.create('MyApp.controller.api');
        }
    }); 

  4. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    30
    Vote Rating
    1
    Answers
    1
    LeonM is on a distinguished road

      1  

    Default


    My solution was not as good as I thought, I still ended up with classes instantiated before the API was fully loaded. I found a better way to do it.

    - Removed all controllers from Ext.application(), except for the one responsible of loading the API
    - Created all other controllers in the callback function of the API controller function after load.

    Like this:
    PHP Code:
    Ext.application({
        
    name'MyApp',
        
    controllers: ['api'],
        
    autoCreateViewporttrue
    }); 
    And the controller:

    PHP Code:
    Ext.define('MyApp.controller.api', {
        
    extend'Ext.app.Controller',
        
    init: function () {
            
    Ext.Ajax.request({
                
    //Fetch the API descriptor
                
    url'http://myapp/api/',
                [...]
                
    scopethis,
                
    successthis.callBack,
            });
        },
        
        
    callBack: function(responseopts){
            [..
    process ajax response..]
            
    this.getController('Workspace');
            
    this.getController('Workspace').init();
            
    this.getController('Login');
            
    this.getController('Login').init();
        }
    }) 
    I hope this might help someone else having a similar situation. Having to work through the weekend to meet a deadline is something I wouldn't wish on anyone