Extjsモデルの保存後にグリッドが空白に描画される

Question

2つのグリッドがアコーディオンレイアウトで分割されています。彼らは基本的に同じ種類のデータを表示するので、グループ化されたグリッドはトリックを行う必要がありますが、この方法では本当にうまく見えます。

グリッドの左側にはグリッドレコードの編集に使用されるフォームパネルがあります。グリッド内のレコードをクリックすると、適切なデータがフォームに表示されます。私はデータを編集することができますが、 '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（））;

動作するはずですが、2行に分割し、getValues（）が期待しているものを返すことを確認するためにブレークポイントを設定してみてください。

フォームのフィールドごとにname属性が設定され、モデル内のフィールドの名前と正確に一致することも確認してください。

最後に、ストアに属しているモデルを使用している場合は、モデルの.save（）ではなく、ストアで.sync（）を呼び出す方がよいでしょう。ストアのオプションautoSync: trueは、モデルの1つに対して有効な更新を行うたびに自動的にこれを実行します。

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

Answer 2

私が見る唯一の風変わりあなたにある：私は常に決して記録に店に.set()を使用しましたthis.activeRecord.set(stepForm.getForm().getValues());

。例えば：

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