Extjs 4.2 自动同步动态网格存储

Question

我有一个带有动态列的网格：

型号

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

商店

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
        }
    }
});

网格

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...

控制器

在控制器中我有下一段代码：

    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);

我使用元数据在 php 中创建列。

通过这段代码，我向网格列添加了一些渲染器。而且我看到所有数据都很完美，并且可以编辑数据。

在 php y 中生成列和字段如下：

$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");

然后将 $array_metadata 传递给 'metaData' 响应。

但是当我尝试同步或自动同步商店时，我收到了这个错误：

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)

更新 1

我在 Sencha 论坛 link 找到了这个帖子，我尝试了所有可能的解决方案，但我总是遇到同样的错误。

Answer 1

错误告诉我们您没有正确填充模型的fields 数组，因为这是name 是必需配置的地方。在 ExtJS 4 中，您必须将所有字段添加到模型中才能正常工作。

确切地说，模型原型必须在创建实例之前填充正确的字段。

这意味着您将不得不覆盖阅读器的getResponseData 方法，因为在Ext.decode 和readRecords 之间，您必须通过设置从服务器返回的字段来准备模型原型；像这样：

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