ExtJs 6.0：使用组合框编辑网格单元格 - 不同步 id 值

Question

我正在使用带有 Ext.grid.plugin.CellEditing 的网格。在网格上，有一个组合框和一个日期。日期同步正确，但组合框正在尝试将组合框的 ID 保存在字符串描述字段中。

我的组合框有字段 codeChecklistItemStatusId（外键）和 codeChecklistItemStatus（用户显示字段）。

当我编辑 Checklist Item Status 字段时，我为显示字段选择的字段 (dataIndex: 'codeChecklistItemStatus') 更新为整数。保存后，字段 codeChecklistItemStatus 由 String 描述更改为新的 id 值，而我要更改 codeChecklistItemStatusId 的字段仍然具有原始 id 值。

我在网上找到的所有示例都保存了字符串值而不是 id 值。有什么方法可以改变 codeChecklistItemStatusId 字段而不是 codeChecklistItemStatus？

我已将 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');
            }
        });
    }
}

Answer 1

我的一位同事想出了如何做到这一点。在网格上，我需要定义的是组合框列的 dataIndex：

{
    xtype: 'editableComboboxGridColumn',
    dataIndex: 'codeChecklistItemStatusId'
},

他创建了一个可重用的 xtype 来处理所有杂乱的代码：

Ext.define('gui.widget.EditableComboboxGridColumn', {
extend: 'Ext.grid.column.Column',

xtype: 'editableComboboxGridColumn',    
width: 200,
tdCls: 'editableCell',

//Required property: dataIndex
initComponent: function() 
{
    var nameCamel = Utilities.toCamelCase(this.dataIndex);
    nameCamel = Utilities.removeId(nameCamel);

    if (this.text == ' ')
        this.text = Utilities.fieldNameToLabel(this.dataIndex);

    if (!this.itemId)
        this.itemId = Utilities.removeId(this.dataIndex) + "GridFld";

    if (!this.store)
        this.store = 'maint.' + nameCamel;

    if (!this.editor)
    {
        this.editor =
        {
            xtype: 'combobox',                    
            queryMode: 'local',
            valueField: (this.valueField ? this.valueField : 'id'),
            displayField: (this.displayField ? this.displayField : 'description'),
            typeAhead: true,
            forceSelection: true,
            store: this.store,
            allowBlank: false
        }
    }

    if (!this.renderer)
    {
        this.renderer = function (value, metaData, record)
        {
            var editor = metaData.column.getEditor(record);
            var storeRecord = editor.store.getById(value);
            if(storeRecord)
                return storeRecord.data[editor.displayField];
            else
                return null;
        }
    }

    this.callParent(arguments);
}
});

Utilities.js 中的其他代码：

Ext.define('gui.Utilities',
{
alternateClassName: 'Utilities',
singleton: true,

fieldNameToLabel: function(name)
{
    var nameProper = '';

    for (var i = 0; i < name.length; i++) {
        var character = name.substr(i, 1);
        if (character.toUpperCase() == character)
            nameProper += ' ';

        if (nameProper.length == 0)
            nameProper += character.toUpperCase();
        else
            nameProper += character;
    }
    if (nameProper.indexOf('Code ') == 0)
        nameProper = nameProper.substring(5);

    if (nameProper.length == nameProper.indexOf(' Id') + 3)
        nameProper = nameProper.substring(0, nameProper.length - 3);

    var regex = / Flag$/
    if (regex.test(nameProper))
        nameProper = nameProper.replace(regex, '');

    if (nameProper.indexOf(' Upd ') > -1)
        nameProper = nameProper.replace(' Upd ', ' Update ');

    return nameProper;

},

toCamelCase: function(name)
{
    return name.substring(0, 1).toUpperCase() + name.substring(1);
},

removeId: function(name)
{
    var regex = /\s?Id$/;
    if (regex.test(name))
        name = name.replace(regex, '');

    return name;
}
});

在开发通用 xtype 之前，我们最初是从这段代码开始的：

renderer : function (value, metaData, record) {             
    var editor = metaData.column.getEditor(record);
    var storeRecord = editor.store.getById(value);
    if(storeRecord)
        return storeRecord.data[editor.displayField];
    else
        return null;
}