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

      0  

    Default MVC, direct proxy and load order

    MVC, direct proxy and load order


    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
    Code:
    <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
    Code:
    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
    Code:
    ...
        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
    Code:
    ...
        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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The directFn can be undefined, you need to define the proxy in the constructor to fix that.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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:

    Code:
    constructor : function(config) {
        Ext.applyIf(config, {
            proxy : {
                type : 'direct',
                directFn : DBICUser.list,
                reader : {
                    type : 'json',
                    root : 'list'
                }
            }
        });
    
        this.callParent([config]);
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default [solved] MVC, direct proxy and load order

    [solved] MVC, direct proxy and load order


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

    Now I can start the real work.

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

      0  

    Default MVC, direct proxy and load order

    MVC, direct proxy and load order


    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.

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

      1  

    Default


    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:

    Code:
    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.

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    Ext.application({
        name : 'MyApp',
    
        launch : function() {} //just like Ext.onReady
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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.

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you have your stores in the requires of Ext.application it shouldn't create an instance of the store.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.