ExtJS 4 (MVC) Store not using my custom Model class

Question

I'm using ExtJS 4.0.7 with its standard MVC architecture. I have a grid with custom store and model classes. The data is loaded remotely via store.load(). I'm using ext-dev.js for debug purposes with dynamic dependency loading.

The app loads fine with no errors in Chrome's console. But the problem is that the records in my store have exactly the same data as provided by my AJAX call, regardless of what fields I have in my model. I even tried renaming and deleting fields but Ext is not paying attention.

Browsing my store object using the console shows that the records all have their own custom runtime-generated model class named Ext.data.reader.Json-Modelext-gen1141. Here is the gist of my code:

My model:

Ext.define('MyApp.model.FooModel', {
    extend: 'Ext.data.Model',

    idProperty: 'column1',
    fields: [
        {name: 'column1', convert: function(value, record) {
            return value + ' TEST-TEST-TEST';
        }},
        'column2',
        'column3'
    ]
});

My store:

Ext.define('MyApp.store.FooStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.FooModel',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: '/blah/blah',
        reader: {
            type: 'json'
        }
    }
});

My grid:

Ext.define('MyApp.view.FooGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'fooGrid',
    store: 'FooStore',
    columns: [{
        text: 'Column 1',
        dataIndex: 'column1',
        flex: 1
    },{
        text: 'Column 2',
        dataIndex: 'column2',
        flex: 1
    },{
        text: 'Column 3',
        dataIndex: 'column3',
        flex: 1
    }]
});

My controller:

Ext.define('MyApp.controller.Foo', {
    extend: 'Ext.app.Controller',
    views: ['FooGridFrame'],
    models: ['FooModel'],
    stores: ['FooStore'],

    init: function() {
        this.control({
            'fooGrid': {
                activate: function(grid) {
                    grid.getStore().load();
                }
            }
        });
    }
});

I can't tell what I'm doing wrong. Any ideas?

I found the answer. My data feed had a metaData property specifying field configurations, and apparently the Store was using these to generate its own model instead of what was in my FooModel. I'll write this into an answer as soon as SO will let me. — curtisdf

curtisdf curtisdf · Accepted Answer · 2012-05-24T19:13:28

It turns out that the AJAX backend (written by another dev for Ext3) was providing some config data via a metaData property. I didn't know that Ext's Store paid any attention to this. My problem was solved by updating the backend to omit the metaData property.

It probably would have also worked to update metaData to provide the appropriate config that I needed, but I'm refactoring to make all the UI config happen in the client.

ExtJS 4 (MVC) Store not using my custom Model class

1 Answers