javascript - ExtJs 6.0 : コンボボックスを使用したグリッド セル編集 - ID 値を同期しない

Question

Ext.grid.plugin.CellEditing でグリッドを使用しています。グリッドには、コンボボックスと日付があります。日付は正しく同期していますが、コンボボックスはコンボボックスの ID を文字列の説明フィールドに保存しようとしています。

私のコンボボックスには、フィールド codeChecklistItemStatusId (外部キー) と codeChecklistItemStatus (ユーザーの表示フィールド) があります。

チェックリスト アイテム ステータス フィールドを編集すると、表示フィールドとして選択したフィールド (dataIndex: 'codeChecklistItemStatus') が整数に更新されます。保存すると、フィールド codeChecklistItemStatus は文字列の説明から新しい id 値に変更され、変更したいフィールド codeChecklistItemStatusId にはまだ元の id 値があります。

私がオンラインで見つけたすべての例では、id 値の代わりに文字列値が保存されています。codeChecklistItemStatus の代わりに codeChecklistItemStatusId フィールドを変更する方法はありますか?

グリッドに dataIndex: 'codeChecklistItemStatusId' を配置すると、グリッドは説明の代わりに数字をユーザーに表示します。ただし、正しいフィールド codeChecklistItemStatusId を保存すると、正しく更新されます。

ChecklistItem ストア:

Ext.define('gui.store.IspIntakeChecklistItem',
{
extend: 'Ext.data.Store',
model: 'gui.model.IspIntakeChecklistItem',
root: 'data',
proxy:
{
    type: 'ajax',
    api:
    {
        read: 'ispIntakeChecklistItem/search',
        update: 'ispIntakeChecklistItem/quickEdit'
    },
    actionMethods:
    {
        read: 'POST'
    },
    reader:
    {
        type: 'json',
        rootProperty: 'data'
    },
    writer:
    {
        type: 'json',
        allowSingle: false,
        writeAllFields: true
    }
}
});

CheckListItem モデル:

Ext.define('gui.model.IspIntakeChecklistItem',
{
extend: 'Ext.data.Model',
fields: [
        {
            name: 'id'
        },
        {
            name: 'codeChecklistItemStatusId'
        },
        {
            name: 'codeChecklistItemStatus'
        },
        {
            name: 'followUpDate'
        }
]
});

コンボボックスのストア:

Ext.define('gui.store.maint.CodeChecklistItemStatus',
{
extend: 'Ext.data.Store',
remoteSort: true,
pageSize: gui.data.Constants.MAX_CODE_RESULTS_IN_GRID,
model: 'gui.model.maint.CodeChecklistItemStatus',
root: 'data',
autoLoad: true,
proxy:
{
    type: 'ajax',
    api:
    {
        read: 'codeChecklistItemStatus/search',
        update: 'codeChecklistItemStatus/updateSortOrder'
    },
    actionMethods:
    {
        read: 'POST'
    },
    reader:
    {
        type: 'json',
        rootProperty: 'data'
    }
}
});

コンボボックスのモデル:

Ext.define('gui.model.maint.CodeChecklistItem',
{
extend: 'Ext.data.Model',
fields: [
        {
            name: 'id'
        },
        {
            name: 'activeFlag'
        },
        {
            name: 'description'
        },
        {
            name: 'sortOrder'
        },
        {
            name: 'createDate'
        },
        {
            name: 'createUser'
        },
        {
            name: 'lastUpdDate'
        },
        {
            name: 'lastUpdUser'
        }
]
});

CellEditing が有効になっているグリッド内のフィールドの一部を次に示します。

         {
            text: 'Checklist Item Status',
            itemId: 'codeChecklistItemStatusGridFld',
            dataIndex: 'codeChecklistItemStatus',
            width: 200,
            editor: {
                xtype: 'combobox',                    
                queryMode: 'local',
                valueField: 'id',
                displayField: 'description',
                typeAhead: true,
                forceSelection: true,
                store: 'maint.CodeChecklistItemStatus',
                allowBlank: false
            },
            tdCls: 'editableCell'
        },
        {
            text: 'Follow Up Date',
            dataIndex: 'followUpDate',
            width: 150,
            editor: {
                xtype: 'datefield'
            },
            tdCls: 'editableCell'
        }

私のコントローラー機能：

quickEditChecklistItem: function(editor, e, eOpts) {
    if (e.originalValue !== e.value) {
        debugger;
        var rec = e.record;
        var store = this.getIspIntakeChecklistItemStore();
        //store.add(rec); 
        store.sync({
            scope: this,
            success: function(batch, options) {

                Ext.create('gui.widget.Notify').success('Checklist Item saved successfully');
            },
            failure: function(batch, options) {
                Ext.create('gui.widget.Notify').failure('failure');
            }
        });
    }
}