MVC, direct proxy and load order

[suamikim]

@praveenyk

I just set up a little sample-project with some basic code to create a MVC-App which shows some static data that is received from Ext-Direct with PHP (see the attached ZIP-File for the full source-code):

App.js:

Ext.define('TD.Application', {
    extend: 'Ext.app.Application',
    name: 'TD',
    appFolder: 'app',

    controllers: [ 'Users' ],

    autoCreateViewport: false,
    launch: function() {
        Ext.create('TD.view.Viewport');
    }
});

Ext.onReady(function() {
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    Ext.create('TD.Application');
}); 

Viewport.js (View):

Ext.define('TD.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    items: {
        xtype: 'userlist'
    }
}); 

User.js (Controller):

Ext.define('TD.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [ 'User' ],
    stores: [ 'Users' ],
    models: ['User']
}); 

User.js (View):

Ext.define('TD.view.User' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',

    store: 'Users',

    columns: [
        { header: 'Name',  dataIndex: 'name',  flex: 1 },
        { header: 'Email', dataIndex: 'email', flex: 1 }
    ]
}); 

User.js (Model):

Ext.define('TD.model.User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email' ]
}); 

Users.js (Store):

Ext.define('TD.store.Users', {
    extend: 'Ext.data.Store',
    model: 'TD.model.User',

    proxy: {
        type: 'direct',
        reader: {
            type: 'json',
            root: 'result'
        }
    },

    constructor : function(config) {
        // The direct-handler-function needs to be applied in the constructor because if we'd do it in the config
        // there would be errors after deployment of the app (see http://www.sencha.com/forum/showthread.php?196544-MVC-direct-proxy-and-load-order)
        Ext.applyIf(this.proxy, {
            directFn: Users.getAllUsers
        });

        this.callParent([config]);
    },

    autoLoad: true
}); 

Users.php:

<?php
class Users {
    public function getAllUsers() {
        // return some static data...
        $users = Array(
            Array(
                "name"  => "Ed",
                "email" => "ed@sencha.com"
            ),
            Array(
                "name"  => "Tommy",
                "email" => "tommy@sencha.com"
            )
        );

        return $users;
    }
}

For further explanations about basic MVC and Ext-Direct stuff, see the guides from ExtJS documentation:
http://docs.sencha.com/ext-js/4-1/#!...n_architecture
http://docs.sencha.com/ext-js/4-1/#!...irect_grid_pt1