ExtJS 之 Gridpanel 键盘 攻略

Gridpanel来自国外，一些快捷键的使用方式在国内总是被指来指去的，水土不服。一个典型的现象就是通过按回车键[Enter key]让光标移动至下一个输入框。有人说有Tab键啊，不好意思，你必须实现，快速录入数据的时候，只操作小键盘的。。。

废话不多说，直接进入 Gridpanel(Extjs 的 EditorGridpanel)的改键攻略

进来看的应该都是写过extjs代码或者至少了解extjs的，我的攻略里面包含了两部分：

1. gridpanel包含3中选择模式：[rowselectionmodel, cellselectionmodel,checkboxselectionmodel]，待会儿就对他们下手
2. Ext框架中的Override方法

如果你的gridpanel采用了rowselectionmodel，那么就对rowselectionmodel override，依次类推。

如果有需要来改这些，我相信都是需要按cell输入的，那么一般都会才用cellselectionmodel，下面就围绕该选择模式来谈谈：

 

补上代码

// 更改 CellSelectionModel 一些键的设置 Ext.override(Ext.grid.CellSelectionModel, { getSelections: function () { // 模拟 RowSelectionsModel 的多选方法，以兼容原先的多选方式 return this.selection ? [this.selection.record] : []; }, onEditorKey: function (field, e) { if (isSkySpecialKey(e.getKey())) { if (field.startValue != field.getValue() && field.getValue() && field.hasListener('TriggerClick')) { field.fireEvent('TriggerClick', field, e); // this.grid.stopEditing(); return; } this.handleKeyDown(e); } }, handleKeyDown: function (e) { if (!e.isNavKeyPress() && e.keyCode != 45 && e.keyCode != 46) { // insert delete return; } var k = e.getKey(), g = this.grid, s = this.selection, sm = this, walk = function (row, col, step) { return g.walkCells( row, col, step, g.isEditor && (g.editing || k == e.ENTER) ? sm.acceptsNav : sm.isSelectable, // *** 寻找该行下一个可编辑列 sm ); }, cell, newCell, r, c, ae; switch (k) { case e.ESC: case e.PAGE_UP: case e.PAGE_DOWN: // do nothing break; case e.INSERT: if (!s && !g.editing && g.skyPush) { g.skyPush(); // 选择最后一行 var lastRow = g.getStore().getCount(); if (lastRow < 1) { lastRow = 1; } newCell = walk(lastRow - 1, 0, 1); } break; default: // *** call e.stopEvent() only for non ESC, PAGE UP/DOWN KEYS e.stopEvent(); break; } if (!newCell) { if (!s) { cell = walk(0, 0, 1); // *** use private walk() function defined above if (cell) { this.select(cell[0], cell[1]); } return; } cell = s.cell; // currently selected cell r = cell[0]; // current row c = cell[1]; // current column switch (k) { case e.DELETE: // 调用 gridpanel 的删除方法 if (!g.editing && s) { try { fireButton('btnDel'); newCell = walk(r, c, 1) || walk(r - 1, c, -1); // 删除完后，默认移动到下一行，没有下行时再移动至上一行 if (!newCell) { return; } } catch (e) { alert("本模块尚未定义删除按钮的事件！"); return; } } break; case e.INSERT: // 调用 gridpanel 的新增方法 if (!g.editing && g.skyPush) { g.skyPush(); newCell = walk(r + 1, c, 1) } break; case e.TAB: if (e.shiftKey) { newCell = walk(r, c - 1, -1); } else { newCell = walk(r, c + 1, 1); } break; case e.DOWN: newCell = walk(r + 1, c, 1); if (!newCell && g.skyPush) { g.skyPush(); newCell = walk(r + 1, c, 1); } break; case e.UP: newCell = walk(r - 1, c, -1); break; case e.RIGHT: newCell = walk(r, c + 1, 1); break; case e.END: newCell = walk(r, this.grid.colModel.getColumnCount() - 1, -1); // 从最后一列开始找符合条件的列，向左移动 break; case e.LEFT: newCell = walk(r, c - 1, -1); break; case e.HOME: newCell = walk(r, 0, 1); // 从第一列开始找符合条件的列，向右移动 break; case e.ENTER: var startCol = g.editing ? c + 1 : c; // 如果未编辑，则从当前开始编辑 if (e.shiftKey) { newCell = walk(r, c - 1, -1); } else { newCell = walk(r, startCol, 1); } if (!newCell && g.skyPush) { g.skyPush(); newCell = walk(r + 1, 0, 1); } break; } } if (newCell) { // *** reassign r & c variables to newly-selected cell's row and column r = newCell[0]; c = newCell[1]; this.select(r, c); // *** highlight newly-selected cell and update selection if (g.isEditor && (g.editing || k == e.ENTER)) { // *** handle tabbing while editorgrid is in edit mode ae = g.activeEditor; if (ae && ae.field.triggerBlur) { // *** if activeEditor is a TriggerField, explicitly call its triggerBlur() method ae.field.triggerBlur(); } g.startEditing(r, c); } } } });