我试图找出一种方法,让 Ext JS 上的网格具有类似 Excel 的行为。
这是我正在使用的示例网格。到目前为止,我们已经可以使用箭头导航单元格,但只能在编辑模式下。
但是我想要达到的是在编辑模式之外使用箭头、TAB 和 Enter 键进行导航,就像 excel 一样。
我试图集成这段覆盖编辑器类的代码,希望它会改变单元格的行为,但它不会改变任何事情。
我相信这是覆盖 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 课程之外的项目,因此非常感谢任何帮助。谢谢 !