MVC, direct proxy and load order

[JBraun]

I managed to run the 'simple' example from the 'extjs/examples/app/simple' directory. This provides a simple working example for the MVC architecture with App, Controllers, Views etc.

Now I tried to replace the ajax-type proxy with a direct-proxy and cannot get that to work. Something is always undefined

I made the following changes:

simple.html

<link rel="stylesheet" type="text/css" href="/static/extjs/resources/css/ext-all.css">
 <script type="text/javascript" src="/static/extjs/ext-all-debug.js"></script> 
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="/api/src"></script>

The last line loads the server side API into 'Ext.app.REMOTING_API'. It is implemented with Perl and Catalyst. This works fine and I used it successfully during my tries.

app.js

Ext.Loader.setConfig({ enabled: true });
Ext.require(['Ext.direct.*' ]);

Ext.application({
   ...    
    autoCreateViewport: false,
  ...
    launch: function() {
        Ext.direct.Manager.addProvider( Ext.app.REMOTING_API );
        Ext.create('Blubberlog.view.Viewport', {} );
     ...

This adds the provider before the Views are created and they create the model and the store for the grid. Otherwise the api is undefined and instantiation of model/store fails.

model/Users.js

...
    proxy: {
        type: 'direct',
        directFn: DBICUser.list,
        reader: {
            type: 'json',
            root: 'list'
        }
    }
...

This uses the server-side api and here I do see the 'DBICUser is not defined' when I set autoCreateViewport to true or add a controller in app.js

view/user/List.js

...
    onReady: function() {
        this.store = Ext.create('Ext.data.Store',
                         {
                             model: 'Blubberlog.model.User',
                             autoload: true
                         });
...

Here I have to create my own store, as my definition from 'store/user.js' is never found.

But my biggest problem is the following. As soon as I initialize the Controller, Model or Store properties or have autoCreateViewport=true within Ext.application, the DBICUser from proxy's directFn is undefined as the provider has not been added before instantiation of the views and store etc. Well, I could create all controllers manually as I did with the Viewport, but that is not what the MVC model and Ext.application is meant for.

I have to create an application before I can add the provider, but I need the provider to create the application with its components. How is this hen-and-egg-problem to be solved?

Thank You for Your advice.

[mitchellsimoens]

The directFn can be undefined, you need to define the proxy in the constructor to fix that.

[JBraun]

Thank You for Your answer, but I do not really understand that.
As I understood it, the configuration is applied to an instance during construction, that is through the constructor.

[mitchellsimoens]

The issue is once the file your store definition is in get loaded, the browser will execute that code so if the function you specify as your directFn is undefined, an error will be thrown. To fix it you can do this in your store's definition:

constructor : function(config) {
    Ext.applyIf(config, {
        proxy : {
            type : 'direct',
            directFn : DBICUser.list,
            reader : {
                type : 'json',
                root : 'list'
            }
        }
    });

    this.callParent([config]);
}

[JBraun]

Thank You very much, this works and more important, I think I understand now.

Now I can start the real work.

[JBraun]

I was a bit too fast.

1. I had to set this constructor within the model. Setting the proxy within the store gives the same 'undefined'.
2. the grid using the store does not post to load the data from the server anymore.

[JBraun]

I think I solved it now. From my console.log() messages I could see that I have to set the provider before the application is started. That is before all the component constructors are called.

I found a solution in this Thread (post#18). In short:

Ext.onReady(function() {

     // First add the Provider
     Ext.direct.Manager.addProvider( Ext.app.REMOTING_API );

     // Now create the application
     Ext.create('Ext.app.Application', {
           ...

And now I can write the MVC Architecture as outlined in the documents and examples. directFns are defined, data is loaded.

Again, thanks for pointing me into the right direction.

[mitchellsimoens]

You should not have Ext.onReady if you are using Ext.app.Application. You should just use Ext.application

Ext.application({
    name : 'MyApp',

    launch : function() {} //just like Ext.onReady
});

[JBraun]

But then I am back at the beginning.

When I put 'addProvider' into the launch function, it is to late, all stores are done before that, all their constructors as well. Before the application calls launch, it loads and initializes all model, store, controllers from the arrays. And they already need the directFn either in config or the constructor.
Or in launch() I have to go through all controllers and patch in the correct directFn afterwards, which sounds a bit strange.

[mitchellsimoens]

If you have your stores in the requires of Ext.application it shouldn't create an instance of the store.