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

时间:2017-06-29 15:29:28

标签: javascript php extjs extjs4.2

我有一个包含动态列的网格:

MODEL

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中生成列和字段,如下所示:

$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 link中设置了这个帖子,我已经尝试了所有的posibles解决方案,并且我总是得到同样的错误。

1 个答案:

答案 0 :(得分:0)

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

确切地说,在创建实例之前,必须使用正确的字段填充Model原型。

这意味着您必须覆盖读者的getResponseData方法,因为在Ext.decodereadRecords之间,您必须通过将字段设置为以下内容来准备模型原型从服务器返回;像这样的东西:

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