Ext JS中Grids的类似Excel的行为

Question

我正试图找出一种方法，使用Ext JS上的Grids来实现类似Excel的行为。

Here是我正在使用的示例网格。到目前为止，我们已经可以使用箭头在单元格中导航但仅在编辑模式下。

然而，我想要达到的是使用箭头，TAB和Enter键在编辑模式之外导航，就像excel一样。

我试图整合这个覆盖了Editor类的piece of code，希望它会改变单元格的行为，但它不会改变它。

我相信这是覆盖Editor类并尝试包含键输入的最重要的部分：

Ext.override(Ext.Editor, {
startEdit: function (el, value) {
    var me = this,
        field = me.field;

    me.completeEdit();
    me.boundEl = Ext.get(el);
    value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;

    if (!me.rendered) {
        me.render(me.parentEl || document.body);
    }

    if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
        me.startValue = value;
        me.show();
        field.reset();

        if (deleteGridCellValue) {
            field.setValue('');
            me.editing = true;
            me.completeEdit();
            deleteGridCellValue = false; // reset global variable
        }
        else {
            if (newGridCellValue == '') {
                // default behaviour of Ext.Editor (see source if needed)
                field.setValue(value);
            }
            else {
                // custom behaviour to handle an alphanumeric key press from non-edit mode
                field.setRawValue(newGridCellValue);
                newGridCellValue = ''; // reset global variable

                if (field instanceof Ext.form.field.ComboBox) {
                    // force the combo box's filtered dropdown list to be displayed (some browsers need this)
                    field.doQueryTask.delay(field.queryDelay);
                }
            }

            me.realign(true);
            field.focus(false, 10);
            if (field.autoSize) {
                field.autoSize();
            }
            me.editing = true;
        }
    }
}
});

这是我第一次参与Comp-Sci课程以外的项目，因此非常感谢任何帮助。谢谢！