Uncaught TypeError: Object #<Object> has no method 'read' with MVC

[rstuart]

Hi all. I have seen some posts on this topic previously but none of the proposed solutions have worked for me. I am trying to re-write my application to use the proposed MVC pattern from the docs (which looks very nice I might add, very interested to see how it scales). Below is my app.js:

Ext.application({
    name: 'Ilib',
    appFolder: '/static/js',
    autoCreateViewport: false,

    models: [ 'Codebook' ],
    views: [ 'codebook.List' ],
    stores: [ 'Codebooks' ],
    controllers: [ 'Codebooks' ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'border',
                padding: '5'
            },
            defaults: {
                split: true
            },
            items: [{
                region: 'north',
                html: '<h1>iLibrary</h1>',
                height: 28,
                border: false,
                bodyCls: 'header',
                bodyStyle: 'text-align: center; background-color: transparent;'
            }, {
                region: 'west',
                collapsible: true,
                title: 'Resources',
                layout: 'accordion',
                flex: 0.2,
                items: [{
                    xtype: 'codebooklist'
                }]
            }, {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                id: 'mainViewCenter',
                items: [{
                    xtype: 'panel',
                    closable: false,
                    bodyStyle: 'padding: 5px',
                    bodyCls: 'welcome',
                    html: '<h1>Welcome to iLibrary</h1>'
                            + '<p>Start by selecting a resource from the left to interact with. Alternatively, you can create a new resource.</p>'
                            + '<img src="/static/images/big_arrow.png" />',
                    title: 'Welcome'
                }]
            }, {
                region: 'east',
                title: 'Property Editor',
                collapsible: true,
                collapsed: true,
                flex: 0.2
            }, {
                region: 'south',
                title: 'System Statistics',
                collapsible: true,
                height: 150
            }]
        });
    }
});

Controller:

Ext.define('Ilib.controller.Codebooks', {
    extend: 'Ext.app.Controller',

    models: [ 'Codebook' ],
    views: [ 'codebook.List' ],
    stores: [ 'Codebooks' ],

    init: function() {
        this.control({
            'viewport > panel[region="west"]': {
                render: this.onPanelRendered
            }
        });
    },
    onPanelRendered: function() {
        console.log('West panel rendered');
    }
});

List view:

Ext.define('Ilib.view.codebook.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.codebooklist',

    title : 'Codebooks',
    store: 'Codebooks',

    initComponent: function() {
        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Description', dataIndex: 'description', flex: 5}
        ];

        this.callParent(arguments);
    }
});

Model:

Ext.define('Ilib.model.Codebook', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'description', type: 'string'}
    ]
});

Store:

Ext.define('Ilib.store.Codebooks', {
    extend: 'Ext.data.Store',

    model: 'Codebook',
    autoLoad: true,

    proxy: {
        type: 'rest',
        url: '/rules/codebooks',
        reader: {
            type: 'json',
            root: 'codebooks',
            totalProperty: 'totalCount'
        }
    }
});

The error happens here -> ext-all-debug-w-comments.js:37464 and the error is Uncaught TypeError: Object #<Object> has no method 'read'. A search of the forum tells me that the most likely cause is that my model isn't actually being registered but I'm not sure why not. The model is listed on the controller and the app. I assume one of those handles the registration of that model with the model manager?

UPDATE: I have changed the model line in the store to model: 'Ilib.model.Codebook' but it hasn't had any affect.

[steffenk]

i'm pretty sure that this happens in the proxy. Try to change the proxy to ajax and see if you get rid of the error.

[rstuart]

i'm pretty sure that this happens in the proxy. Try to change the proxy to ajax and see if you get rid of the error.

Has no affect.

[rstuart]

No one has any ideas? Should I post this in the bug section?

[rstuart]

I fixed the problem by doing the following things:

1. Removed models, views and stores arrays from app.js.
2. Moved the stores array declaration to above the models array definition on the controller.
3. Moved the ExtJS library to be at the same level as app.js in the file directory as app.js.

I have no idea which one worked. I suspect it was the first one. It is very worrying that any of these items either singularly or as a whole would fix my problem. In the documentation for Ext.app.Application it specifically says "Because an Ext.app.Application represents an entire app, we should tell it about the other parts of the app - namely the Models, Views and Controllers that are bundled with the application.". There is a high chance that this might be just plain wrong.

[medusadelft]

I have a similair problem. I've just added one more store to my app (and I had about 5 or 6 loading already) and I get the same error. I suspect it's a bug, so I posted it in the Bugs forum.

[leonrenkema]

I fixed this problem by an explicit Ext.require in the store:

Ext.require('CM.model.ProductGroup');

Ext.define('CM.store.ProductGroup',{ 
  extend: 'Ext.data.Store',
  model: 'CM.model.ProductGroup',
  ...

I think it has something to do with the autoloading from within the store and the assumption of the store that the model is known. But i'm just started with ExtJS4 so I could be wrong.

[andy_ghg]

I fixed this problem by an explicit Ext.require in the store:

Ext.require('CM.model.ProductGroup');

Ext.define('CM.store.ProductGroup',{ 
  extend: 'Ext.data.Store',
  model: 'CM.model.ProductGroup',
  ...

I think it has something to do with the autoloading from within the store and the assumption of the store that the model is known. But i'm just started with ExtJS4 so I could be wrong.

Thanks for your tips!!!!!!I wasted a lot of time on this.I like you very much.

[paulfilippi]

Including the model file before the store file fixed the problem for me

[medusadelft]

When trying to use the examples from the proxy.Ajax page (http://docs.sencha.com/ext-js/4-0/#/...ax-method-read), section Url generation in an MVC controller, I get the mentioned error again.

Moving the declaration of models above the stores doesn't help. I ended up with adding a model to the proxy. The model itself is a faker with just one field defined.

Ext.define('EX.model.Faker', { 
    extend: 'Ext.data.Model', 
    fields: [
        {name: 'id', type: 'int'}
    ]
}); 

This seems to work (at least, the error is gone). Apparently, even a proxy needs a model. (The documentation says so, so the examples in that same document are WRONG!).

Update: the model in the proxy doesn't even have to exist! If you do not declare the model in the controller models property, but only add model: 'Faker' to the proxy, it seems to fire the read event...

        var operation = new Ext.data.Operation({
            action: 'read'
        });
        var proxy = new Ext.data.proxy.Ajax({
            api: {
                read: "do_something.php"
            }
            ,model: 'Faker'
            ,reader: {
                type: 'json'
                ,root: 'response'
            }
        });
        proxy.read(operation);