Extjs4 grid 实现上下左右跳转

最新推荐文章于 2021-01-26 23:17:48 发布

dataminer_2007

最新推荐文章于 2021-01-26 23:17:48 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS 文章标签： exjts4 grid 上下左右方向

本文链接：https://blog.csdn.net/dataminer_2007/article/details/39178911

ExtJS 专栏收录该内容

15 篇文章

订阅专栏

最近遇到一需求，用户希望在 grid 中输入数据时可以像在 excel 中操作一样，按上下左右方向键跳转到下一个单元格。

于是查查源代码，发现实现起来还挺简单的，只需要覆盖下基类的方法即可：

Ext.grid.plugin.CellEditing.override( {
    onSpecialKey : function(ed, field, e) {
        var sm;
        
        // keyCode: 37(左), 38(上), 39(右), 40(下)
        if (e.keyCode == 38 || e.keyCode == 40) {
        	if (field.xtype == 'combo') {
        		return;
        	}
    		e.stopEvent();
            if (ed) {
                ed.onEditorTab(e);
            }
            sm = ed.up('tablepanel').getSelectionModel();
            if (sm.onEditorTab) {
                return sm.onEditorTab(ed.editingPlugin, e);
            }
        } else if (e.getKey() === e.TAB || e.getKey() === e.ENTER || e.keyCode == 37 || e.keyCode == 39) {
            e.stopEvent();
            if (ed) {
                ed.onEditorTab(e);
            }
            sm = ed.up('tablepanel').getSelectionModel();
            if (sm.onEditorTab) {
                return sm.onEditorTab(ed.editingPlugin, e);
            } 
        }
    }
}); 

Ext.selection.RowModel.override( {
	onEditorTab: function(editingPlugin, e) {
	    var me = this,
	        view = me.views[0],
	        record = editingPlugin.getActiveRecord(),
	        header = editingPlugin.getActiveColumn(),
	        position = view.getPosition(record, header),
	        direction = e.shiftKey ? 'left' : 'right';
	    
	    // keyCode: 37(左), 38(上), 39(右), 40(下)
	    if (e.keyCode == 37) {
	    	direction = 'left';
	    } else if (e.keyCode == 38) {
	    	direction = 'up';
	    } else if (e.keyCode == 40) {
	    	direction = 'down';
	    }
	
	    do {
	        position  = view.walkCells(position, direction, e, me.preventWrap);
	    } while (position && (!position.columnHeader.getEditor(record) || !editingPlugin.startEditByPosition(position)));
	}
});