javascript - extjs 网格编辑器前进到下一列

Question

我正在尝试制作一个网格编辑器，它会在第一列中键入 5 个字符后自动前进到下一列。我已经将我认为正确的代码放在一起，但所选列不断跳回到第一列并清除输入的数据。

这是我正在使用的网格:

Ext.create('Ext.grid.Panel', {
    title: 'idNumbers',
    store: Ext.data.StoreManager.lookup('priceStore'),
    plugins: [Ext.create('Ext.grid.plugin.RowEditing', 
    {
        clicksToEdit: 1,
        pluginId: 'idNumberGridEditor'
    })],
    columns: [
        { 
            header: 'Name',  
            dataIndex: 'idNumber',
            editor: {
                allowBlank: false,
                xtype: 'combobox',
                store: Ext.data.StoreManager.lookup('idNumberStore'),
                displayField: 'idNumber',
                valueField: 'idNumber',
                typeAhead: true,
                allowBlank: false,
                forceSelection: true,
                enableKeyEvents: true,
                listeners: {
                    keyup: function(combo, e, eOpts) {
                        if(combo.getValue().length==5)
                        {
                            //move to next control
                            if(!this.nowFive)
                            {
                                editPlugin = this.up().editingPlugin;
                                curRow = editPlugin.context.rowIdx;
                                curCol = editPlugin.context.colIdx;
                                editPlugin.startEdit(curRow, curCol + 1);
                                this.nowFive = true;
                            }
                        }
                        else
                        {
                            this.nowFive = false;
                        }                 
                   }
                }
            }
        },
        { 
            header: 'Phone', 
            dataIndex: 'price',
            editor: {
                allowBlank: false,
                 xtype: 'numberfield'
            }
        }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            console.log(this);
            //this.editor.startEdit(1,1);
        }
    }
});

这是完整的例子:http://jsfiddle.net/cFD9W/5/

Answer 1

startEdit将重置编辑状态(它旨在与 completeEdit 或 cancelEdit 结合使用。您在这里想要的只是关注下一个字段，这样编辑状态将由插件正确处理。

本着这种精神 (updated fiddle)，这是对您的听众的重写:

keyup: function(combo, e, eOpts) {
    if(combo.getValue().length==5) {
        //move to next control
        if(!this.nowFive) {
            var editPlugin = this.up().editingPlugin,
            editor = editPlugin.getEditor(), // Ext.grid.RowEditor
            curCol = editPlugin.context.colIdx,
            currentField = editor.getEditor(curCol),
            nextField = editor.getEditor(curCol + 1);
            if (currentField) {
                // ensure the combo is collapsed when the field is blurred
                currentField.triggerBlur();
            }
            if (nextField) {
                // startEdit will reset the edit state... What we need
                // is simply to focus the field, the value will be
                // updated when the user clicks the "update" button.
                nextField.focus();
            }
            this.nowFive = true;
        }
    } else {
        this.nowFive = false;
    }                 
}

最后，正如 Akori 所说，如果您将 forceSelection 设置为 true，组合值将被强制为商店中已经存在的组合值，这可能不是您想要的。