Hybrid View

  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,121
    Vote Rating
    855
    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,121
    Vote Rating
    855
    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.