Question

我有几个网格，分为手风琴布局。它们基本上显示相同类型的数据，因此分组网格应该可以做到这一点，但它看起来非常好，到目前为止它也很好用。

网格左侧有一个表单面板，用于编辑网格记录，当我点击网格中的记录时，相应的数据显示在表单中。我可以编辑数据，但是当我单击保存按钮（触发'model'.save（）动作）时，相关的网格行将显示空白并显示脏标志。我检查了模型，'data'属性不包含任何数据，但id，数据存在于'modified'属性中。

我读到红色脏标志意味着数据不会持久存储在后端，但在这种情况下它是。请求返回200状态代码并成功：true。

来自控制器的onSave方法：

onSave : function() {
    // Get reference to the form
    var stepForm = this.getStepForm();

    this.activeRecord.set( stepForm.getForm().getValues() );

    this.activeRecord.save();

    console.log( this.activeRecord );
}

步骤商店：

Ext.define( 'Bedrijfsplan.store.Steps', {
    extend : 'Ext.data.Store',

    require : 'Bedrijfsplan.model.Step',

    model : 'Bedrijfsplan.model.Step',

    autoSync : true,

    proxy : {
        type : 'rest',

        url : 'steps',

        reader : {
            type : 'json',

            root : 'steps'
        },

        writer : {
            type : 'json',

            writeAllFields : false,

            root : 'steps'
        }
    }
} );

步骤模型：

Ext.define( 'Bedrijfsplan.model.Step', {
    extend : 'Ext.data.Model',

    fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],

    proxy : {
        type : 'rest',

        url : 'steps',

        successProperty : 'success'
    }
} );

步骤网格

Ext.define( 'Bedrijfsplan.view.step.Grid', {
    extend : 'Ext.grid.Panel',

    alias : 'widget.stepsgrid',

    hideHeaders : true,

    border : false,

    columns : [ {
        header : 'Titel',

        dataIndex : 'title',

        flex : 1
    } ]
 } );

我花了几个小时搜索和尝试，但我仍然没有找到解决方案。对此事的一些帮助将不胜感激：）

Answer 1

我看到的唯一奇怪的是你的this.activeRecord.set( stepForm.getForm().getValues() );

我总是在商店里使用.set()从未记录过。 e.g：

myDataStore.set( stepForm.getForm().getValues() );

Answer 2

您的型号更新代码： this.activeRecord.set（stepForm.getForm（）。getValues（））;

应该可以工作，但我可能会尝试将其拆分为两行并设置断点以验证getValues（）是否正在返回您期望的内容。

同时确保您为表单中的每个字段设置了name属性，并且该属性与模型中字段的名称完全匹配。

最后，当您使用属于商店的模型时，最好在商店上调用.sync（）而不是模型上的.save（）。商店中的选项autoSync: true会在您每次对其中一个模型进行有效更新时自动执行此操作。

BasicForm.loadRecord和BasicForm.updateRecord方法为您正在寻找的功能提供了一个很好的包装，可以更好地工作：

onRowSelected: function(activeRecord) {
    stepForm.getForm().loadRecord(activeRecord);
}

onSaveClick: function() {
    var activeRecord = stepForm.getForm().getRecord();
    stepForm.getForm().updateRecord(activeRecord);
    activeRecord.store.sync();
}

Extjs 4 gridrow在模型保存后绘制空白

2 个答案: