Extjs 4.2 autosync dynamic grid store

Question

I have a grid with dynamic columns:

MODEL

Ext.define('App.mdlCriteriosConcurso', {
    extend: 'Ext.data.Model',
    fields: [
    ]   
});

STORE

Ext.define('App.strCriteriosConcurso', {
    extend: 'Ext.data.Store',
    model:  'App.mdlCriteriosConcurso',
    autoLoad: false,
    proxy: {
        type: 'ajax', 
        api: {
            read: 'some url',
            update: 'some url',
        },
        reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
        },
        writer: {
            root: 'records',
            encode: true,
            writeAllFields: true
        }
    }
});

GRID

var almacenCriteriosConcurso = Ext.create('App.strCriteriosConcurso');
//Some code ...
{
    xtype:'grid',
    itemId:'gridCriteriosConcursoV4',
    store:almacenCriteriosConcurso,
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2})],
    columns:[]
}
//Some code...

CONTROLLER

Here in the controller I have the next piece of code:

    Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].getStore().addListener('metachange',function(store,meta){
        var columnas=0;
        var renderer1 = function(v,params,data){
            if(v==''){
                return '<div style="background-color:#F5FAC3;color:blue;">'+Ext.util.Format.number(0,'0.000,00/i')+'</div>';
            }
            else{
                return '<div style="background-color:#F5FAC3;color:blue;">'+Ext.util.Format.number(v,'0.000,00/i')+'</div>';
            }
        };
        var renderer2 = function(v,params,data){
            if(v=='' || v==0){
                return '<div style="background-color:#F5FAC3;color:green;">'+Ext.util.Format.number(0,'0.000,00/i')+'</div>';
                //return '';
            }
            else{
                return '<div style="background-color:#F5FAC3;color:green;">'+Ext.util.Format.number(v,'0.000,00/i')+'</div>';
            }
        };

        Ext.each(meta.columns,function(col){
            if(columnas==2){
                meta.columns[columnas].renderer = renderer1;
            }
            if(columnas>=3){
                meta.columns[columnas].renderer = renderer2;
            }
            columnas++;
        },this);
        Ext.suspendLayouts();
        Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].reconfigure(store, meta.columns);
        Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].setTitle("<span style='color:red;font-weight:bold;font-size: 12pt'>Criterios del Concurso con ID:</span> "+"<span style='color:black;font-weight:bold;font-size: 12pt'>"+this.IdConcurso+"</span>");
        Ext.resumeLayouts(true);
    },this);

I create the columns in the php, using the metadata.

With this code I add some renderers to the grid columns. And I see all the data perfect, and can edit the data.

In the php y generate the column and the field like this:

$array_metadata['columns'][]=array("header"=>"<span style='color:blue;'>Resultado</span>","dataIndex"=>"puntos_resultado","width"=>82,"align"=>"right","editor"=>"textfield");
$array_metadata['fields'][]=array("name"=>"puntos_resultado","type"=>"float");

And then pass $array_metadata to 'metaData' response.

But when I try to sync or autosync the store I get this error:

Uncaught TypeError: Cannot read property 'name' of undefined
    at constructor.getRecordData (ext-all-dev.js:62247)
    at constructor.write (ext-all-dev.js:62192)
    at constructor.doRequest (ext-all-dev.js:102306)
    at constructor.update (ext-all-dev.js:101753)
    at constructor.runOperation (ext-all-dev.js:106842)
    at constructor.start (ext-all-dev.js:106769)
    at constructor.batch (ext-all-dev.js:62869)
    at constructor.sync (ext-all-dev.js:64066)
    at constructor.afterEdit (ext-all-dev.js:64162)
    at constructor.callStore (ext-all-dev.js:101428)

UPDATE 1

I have fount this thread in Sencha Forums link , and I have tried all posibles solutions and Im getting allways the same error.

Alexander Alexander · Accepted Answer · 2017-06-29T23:59:32

The error tells us that you don't fill the model's fields array properly, because that is where name is a required config. In ExtJS 4, you have to add all fields to the model for the sync to work properly.

To be exact, the Model prototype has to be filled with the correct fields before the instances are created.

This means that you will have to override the reader's getResponseData method, because between Ext.decode and readRecords you will have to prepare the model prototype by setting the fields as returned from the server; something like this:

App.mdlCriteriosConcurso.prototype.fields = data.fields;

Extjs 4.2 autosync dynamic grid store

1 Answers