1. #11
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    1
    JBraun is on a distinguished road

      0  

    Default


    So I coded:

    Code:
    Ext.Loader.setConfig({ enabled: true });
    Ext.require(['Ext.direct.*']);
    
    Ext.application( {
        name: 'MyApp',
        
        requires: ['MyApp.store.User'],
        models: ['User'],    
        stores: ['User'],
        controllers: ['User'],
        autoCreateViewport: true,
        
        launch: function() {
            Ext.direct.Manager.addProvider( Ext.app.REMOTING_API );
        }
    });
    In Firefox Webconsole the lines after loading "/api/src" are:
    "GET http://...app/store/user.js.."
    "GET http://...app/model/user.js.."
    "DBICUser is not defined".

    If I comment out the models, stores and controllers lines, the undefined error occurs now after the "GET view/Viewport.js" line.

    The Store looks like this now:
    Code:
    Ext.define('MyApp.store.User', {
        extend: 'Ext.data.Store',   
        model: 'MyApp.model.User',
        autoLoad: true,
        constructor : function(config) {
            Ext.applyIf(config, {
                proxy : {
                    type : 'direct',
                    directFn : DBICUser.list,
                    reader : {
                        type : 'json',
                        root : 'list'
                    }
                }
            });
    
            this.callParent([config]);
        }
    });
    The model just holds

    Code:
    Ext.define("Blubberlog.model.Ansatz", {
        extend: 'Ext.data.Model',
    
        fields: [...],
        idProperty:"id_user",
        associations: [ ... ]
    });
    Do I have to load something else than "ext-all-debug.js" ?

  2. #12
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    0
    fredbaba is on a distinguished road

      0  

    Default


    Not sure if this has been resolved, but the way that I do this is by having my direct proxy definition available as a server resource, i.e. directapi.js. Then I just make an HTTP GET to this resource in my main HTML file before requesting my main.js. There may be a better way to do this, but I couldn't figure it out...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Grip Contacts</title>
        <!--Ext JS-->
        <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
        <script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
        <!--Application JS-->
        <script type="text/javascript" src="directapi.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <!--Application Aesthetics-->
        <link rel="stylesheet" href="static/style.css" type="text/css">
    </head>
    <body>
    </body>
    </html>

  3. #13
    Sencha User
    Join Date
    Mar 2012
    Posts
    84
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default


    I'm currently struggeling with the same issue...

    @JBraun: Have you found a solution yet? If so, please let us know how you did it.
    @fredbaba: Could you please describe how your directapi.js looks like?

    Thanks

  4. #14
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    0
    fredbaba is on a distinguished road

      0  

    Default


    Quote Originally Posted by suamikim View Post
    @fredbaba: Could you please describe how your directapi.js looks like?

    Thanks
    When a request is made for "directapi.js," my server responds with the following json text:

    Code:
    Ext.ns("Ext.app"); Ext.app.REMOTING_API = {"url": "/api.js", "type":  "remoting", "id": "ContactsAPI", "actions": {"ContactsAPI": [{"name":  "create", "len": 1}, {"name": "destroy", "len": 1}, {"name": "read",  "len": 1}, {"name": "update", "len": 1}, {"name": "validate", "len":  1}]}};
    This is generated programmatically in my case. I use the extdirect python package (http://code.google.com/p/extdirect) to define my interface, then set up a resource using the bottlepy server framework (http://bottlepy.org/docs/dev/). The corresponding Python code is:

    Code:
    DIRECT_API_URI='/directapi.js'
    #...
    @get(DIRECT_API_URI)
    def api_spec():
        return 'Ext.ns("Ext.app"); Ext.app.REMOTING_API = %s;' % json.dumps(DirectProviderDefinition(ContactsAPI, DIRECT_API_URI)._config())

  5. #15
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    Just init your Ext.Direct API in Application's constructor and it'll be fine.

    Regards,
    Alex.

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Posts
    84
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default


    How can i hook to the applications constructor to init the Ext.Direct API in it?

    The application-file looks something like this:

    PHP Code:
    Ext.Loader.setConfig({
        
    enabledtrue
    });

    Ext.require([
        
    'Ext.direct.*'
    ]);

    Ext.application({
        
    name'LS',
        
    appFolder'app',
        
        
    controllers: [
            
    //...
        
    ],
        
        
    autoCreateViewportfalse,
        
    launch: function() {
            
    Ext.tip.QuickTipManager.init();
            
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
            
            
    Ext.create('LS.view.Viewport', {id'viewport'});
            
            
    // Save the app-object to be accessible from everywhere...
            
    LS.app this;
        }
    }); 
    Thanks

  7. #17
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    You can pass constructor in Application object along with other methods:

    Code:
    Ext.application({
        ...
    
        constructor: function(config) {
            var me = this;
    
            Ext.apply(me, config);
    
            me.callParent(arguments);
    
            Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
        },
    
        launch: function() {
            ...
        }
    });
    On a side note, you don't need to init QuickTips manually, Ext.app.Application does it for you.

    Also, Ext.application() is a thin wrapper that instantiates Ext.app.Application with config passed to it, so this convoluted Ext.application({ ... }) construct can be replaced with more readable code:

    Code:
    LS.Application.js
    
    Ext.define('LS.Application', {
        name: 'LS',
        appFolder: 'app',
    
        ...
    });
    
    main.js
    
    Ext.require([
        'LS.Application'
    ]);
    
    Ext.onReady(function() {
        new LS.Application();
    });
    Regards,
    Alex.

  8. #18
    Sencha User
    Join Date
    Mar 2012
    Posts
    84
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default


    Perfect. For me it's working with the following setup:

    PHP Code:
    // app.js
    Ext.Loader.setConfig({
        
    enabledtrue
    });

    Ext.require([
        
    'Ext.direct.*'
    ]);

    Ext.define('LS.Application', {
        
    extend'Ext.app.Application',
        
    name'LS',
        
    appFolder'app',
        
        
    controllers: [
            
    //...
        
    ],
        
        
    autoCreateViewportfalse,
        
    launch: function() {
            
    Ext.create('LS.view.Viewport', {id'viewport'});
        },
        
        
    constructor: function(config) {
            
    this.initConfig(config);

            
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
            
            return 
    this.callParent(arguments);
        }
    });

    Ext.onReady(function() {
        
    Ext.create('LS.Application');
    }); 
    PHP Code:
    // store
    Ext.define('LS.store.Categories', {
        
    extend'Ext.data.TreeStore',
        
        
    model'LS.model.Category',
        
        
    proxy: {
            
    type'direct',
            
    directFnMyClass.myMethod,
            
    //...
        
    }
    }); 
    @nohuhu:
    2 little comments on your code:

    1) If i use the Ext.application({...}) wrapper the constructor won't be called (at least it didn't when i tried it...). The constructor just got called after i extended the Application-Class with Ext.define like above.

    2) You forgot the "extend: 'Ext.app.Application'" in your second piece of code which obviously is pretty important. I'm sure you just forgot it but i want to mention it so that other users who see this thread are aware of it...

    Thanks & best regards,

    Mik

  9. #19
    Sencha User
    Join Date
    Jan 2010
    Location
    Brazil
    Posts
    6
    Vote Rating
    0
    nosklo is on a distinguished road

      0  

    Default


    I was also having this same trouble, so I did the same fix. However I don't see the point of all that since I have to initialize the application inside a Ext.onReady anyway, so just put the addProvider inside that Ext.onReady and no need for subclassing Application and adding constructor.

  10. #20
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    praveenyk is on a distinguished road

      0  

    Default


    hii,
    can u plz post a link for simple app with complete code, i a finding it difficult to implement the MVC in Ext Direct.

    Regard
    Praveen