Question

I can’t get my application to work using MVC architecture.

Here is the code:

app.js

Ext.application({
    name: CONFIG.APP_NS,
    appFolder: '../js/app',
    autoCreateViewport: true,

    /*
    models: ['User'],

    stores: ['Users'],
    //*/

    controllers: ['Main', 'Tab', 'Import', 'Export', 'Predict', 'Admin']  
});

Import.js (controller)

Ext.define(CONFIG.APP_NS+'.controller.Import', {
    extend: 'Ext.app.Controller',

    //stores: ['Users'], //Uncommenting this makes the application not load at all
    models: ['User'],
    views: ['Import.Window', 'Import.Toolbar', 'Import.Grid'],

    init: function(){
        ...
    },

    ...
});

User.js (model)

Ext.define(CONFIG.APP_NS+'.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',            type: 'int'},
        {name: 'username',      type: 'string'},
        {name: 'password',      type: 'string'},
        {name: 'salt',          type: 'string'},
        {name: 'firstName',     type: 'string'},
        {name: 'lastName',      type: 'string'},
        {name: 'email',         type: 'string'},
        {name: 'admin',         type: 'boolean'},
        {name: 'authenticated', type: 'boolean'}
    ],

    hasMany: {model: CONFIG.APP_NS+'.model.Roles', name: 'roles'},

    proxy: {
        type: 'ajax',
        url: 'model/users',
        reader: {
            type: 'json'
        }
    }
});

Ext.define(CONFIG.APP_NS+'.model.Roles', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'role',          type: 'string'}
    ],

    belongsTo: CONFIG.APP_NS+'.model.User'
});

Users.js (store)

Ext.define(CONFIG.APP_NS+'store.Users', {
    extend: 'Ext.data.Store',
    requires: CONFIG.APP_NS+'.model.User',
    model: CONFIG.APP_NS+'.model.User'
});

Grid.js (view)

Ext.define(CONFIG.APP_NS+'.view.Import.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.importgrid',

    initComponent: function() {
        this.store = Ext.create('Ext.data.Store', { //Works fine with the code as it is
            model: CONFIG.APP_NS+'.model.User',
            proxy: {
                type: 'ajax',
                url: 'model/users',
                reader: {
                    type: 'json'
                }
            }
        });
        //*/
        //this.store = Ext.create(CONFIG.APP_NS+'.store.Users', {});

        this.columns = [
            {header: 'Name',  dataIndex: 'username',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);

        this.store.load();
    }
});

I have tried almost every combination of stores: in different files possible, nothing seems to do the trick. If I do not include the store anywhere, I get the error Object is not a function (or TypeError: Cannot call method ‘on’ of undefined if defined outside of the initComponent in the view) somewhere in internal extjs files. It seems that even if I copy the structure from the tutorial examples, it still does not work, so I must be missing something.

What am I doing wrong?

Thank you for your time.

EDITS:

I am running this code on Wamp (localhost). The server has both ExtJS4 and Symfony installed and running.

Updated error message.

Fixed a typo in the Model, see comments.

Answer 1

I found the bug.

Users.js (store)

Ext.define(CONFIG.APP_NS+'store.Users', {
    extend: 'Ext.data.Store',
    requires: CONFIG.APP_NS+'.model.User',
    model: CONFIG.APP_NS+'.model.User'
});

First line should be:

Ext.define(CONFIG.APP_NS+'.store.Users', {

I was missing a period before store.

Molecule Man’s comment made me recheck all the definitions, thank you.