extjs - Ext.grid.Panel セルのダーティ フラグの解決

Question

Ext JS グリッドで、個々のセルを編集しています。列の 1 つに、Save イベントを発生させる [保存] ボタンがあります。編集したセルの汚れたフラグ (下の画像の赤いボックス) を削除するにはどうすればよいですか? ドキュメントには良い例があるため、プロキシを使用して作成、更新、および破棄オプションを実行する方法がわかりません。実際の Sencha トレーニングを受けるまで、これらの手順の AJAX リクエストを実行する予定です。ただし、ストアとプロキシを直接操作するとダーティ フラグが解決される場合は、正しい方法で実行することをお勧めします。

JavaScript コード:

            }, {
                header: 'Save',
                xtype: 'actioncolumn',
                align: 'center',
                width: 50,
                sortable: false,
                items: [{
                    icon: './Scripts/extjs/examples/shared/icons/fam/add.gif',
                    tooltip: 'Save Row',
                    handler: function (grid, rowIndex, colIndex) {
                        store.sync();                            
                        alert('saving');
                    }
                }]
            }, {
                header: 'Delete',
                xtype: 'actioncolumn',
                align: 'center',
                width: 50,
                sortable: false,
                items: [{
                    icon: './Scripts/extjs/examples/shared/icons/fam/delete.gif',
                    tooltip: 'Delete Task',
                    handler: function (grid, rowIndex, colIndex) {
                        store.removeAt(rowIndex);
                        store.sync();
                        alert('deleting');
                    }
                }]
            }

Answer 1

これを試して：

// you can keep the way you are creating your Grid
Ext.create('Ext.grid.Panel', {
    // other options
    // these configs are sent to Ext.view.Table through Ext.grid.View
    viewConfig: {
        markDirty: false
    }
});

私はそれをテストしませんでしたが、それが必要なものだと思います。見てみましょう：

• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.grid.View
• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.view.Table
• http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.view.Table-cfg-markDirty

Ext.view.Table クラスの説明を読めば、何が行われているのか理解できるでしょう。

Answer 2

グリッドは、データ モデルに基づくレコードのコレクションである、基になるストアの状態を反映します。したがって、Ajax プロキシを理解する前のショートカットとして、次のことができます。

// Save handler
handler: function(grid, rowIndex, colIndex) {
    store.sync(); // Doesn't work now

    store.getAt(rowIndex).commit(); // Commit changes, clearing dirty flag

    alert('Record should now be clear');
}