MVC, direct proxy and load order

**JBraun** · 19 Apr 2012 5:47 AM

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" ?

**fredbaba** · 5 Jun 2012 1:59 PM

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>

**suamikim** · 20 Aug 2012 2:29 AM

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

**fredbaba** · 20 Aug 2012 6:45 AM

Originally Posted by suamikim

@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())

**nohuhu** · 20 Aug 2012 9:24 AM

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

Regards,
Alex.

**suamikim** · 20 Aug 2012 12:10 PM

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({
    enabled: true
});

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

Ext.application({
    name: 'LS',
    appFolder: 'app',
    
    controllers: [
        //...
    ],
    
    autoCreateViewport: false,
    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

**nohuhu** · 20 Aug 2012 12:53 PM

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.

**suamikim** · 20 Aug 2012 10:51 PM

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

PHP Code:


// app.js
Ext.Loader.setConfig({
    enabled: true
});

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

Ext.define('LS.Application', {
    extend: 'Ext.app.Application',
    name: 'LS',
    appFolder: 'app',
    
    controllers: [
        //...
    ],
    
    autoCreateViewport: false,
    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',
        directFn: MyClass.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

**nosklo** · 8 Nov 2012 5:18 AM

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.

**praveenyk** · 2 Jan 2013 3:41 AM

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

MVC, direct proxy and load order

Thread Tools

Search Thread

Display