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

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

在控制器中，這里有下一段代碼：

    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 Forums 鏈接中找到了該線程，並且嘗試了所有可能的解決方案，而Im始終遇到相同的錯誤。

Answer 1

該錯誤告訴我們您沒有正確填充模型的fields數組，因為那是name是必需配置的地方。 在ExtJS 4中，必須將所有字段添加到模型中，同步才能正常工作。

確切地說，在創建實例之前，必須為Model原型填充正確的字段。

這意味着您將必須重寫讀取器的getResponseData方法，因為在Ext.decode和readRecords之間，您將必須通過設置服務器返回的字段來准備模型原型。 像這樣的東西：

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