dynamically set fields to a extjs data store

Question

I am trying to dynamically set fields to a extjs data store so that I could dynamically create a different grid at run time.

Case A works for me. But when I use as in Case B, the store's proxy hangs on to the previous model and so the grid rendering is messed up.

What is the really the difference between these two?

Case A

Ext.define('FDG.store.reading.FDGDynamicGridStore', {
    extend: 'Ext.data.Store'
});

var fdgstore = Ext.create('FDG.store.reading.FDGDynamicGridStore', {
        fields: fields,
        proxy: {
            type: 'memory',
            reader: {
            type: 'json',
            totalProperty: 'tc',
            root: 'Result'
            }
        }
        });
fdgstore.loadRawData(output);
this.reconfigure(fdgstore, columns);

Case B

Ext.define('FDG.store.reading.FDGDynamicGridStore', {
    extend: 'Ext.data.Store',    
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            totalProperty: 'tc',
            root: 'Result'
        }
    }
});

var fdgstore = Ext.create('FDG.store.reading.FDGDynamicGridStore', {
        fields: fields
        });
fdgstore.loadRawData(output);
this.reconfigure(fdgstore, columns);

Juan Mendes Juan Mendes · Accepted Answer · 2014-03-11T00:37:34

Here's what I think is going on:

Ext.data.Model is responsible for holding the proxy and field. Setting those properties on a store is discouraged in favor of MVC, though it was the only way before Ext-JS MVC came along.

A store always uses the proxy associated with the model object. When you pass in a fields property to a store, an anonymous Model is created with a default proxy. You shouldn't use that when specifying proxies. From the doc

For anything more complicated, such as specifying a particular id property or associations, a Ext.data.Model should be defined and specified for the model config.

My suggestion is that you create the models dynamically based on fields so you don't have any of the anonymous Model voodoo.

function createModelWithCustomProxy(fields) {
    return Ext.define('FDG.store.reading.Mymodel' + Ext.id(), {
        extend: 'Ext.data.Model',
        fields: fields,    
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                totalProperty: 'tc',
                root: 'Result'
            }
        }
    }
});

var fdgstore = Ext.create('Ext.data.Store', {
    model: createModelWithCustomProxy(fields);
});
fdgstore.loadRawData(output);
this.reconfigure(fdgstore, columns);

dynamically set fields to a extjs data store

1 Answers