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，则组合值将强制为商店中已存在的值，这可能不是您想要的。

extjs网格编辑器进入下一栏

1 个答案: