Ext2中实现全页面键盘导航

Ext2中实现全页面键盘导航，通俗点说就是回车键有Tab键的效果。在Google上搜到了一段代码，在此基础上做了一些修改，能够满足更复杂的情况：

/**
* 表单全键盘导航功能 xFocus:可选参数，用于设定页面加载完成后默认获取焦点的表单项，支持索引号和id/dom类型参数传入。
*/
var keyNav = function(xFocus) {
var run = function() {
//查找所有非隐藏的录入项,排除掉css的class等于"x-tbar-page-number"的项，就是Ext Grid的分页条中的一个输入框
//遇到类似特殊情况都可以这么排除
var all = Ext.DomQuery.select('input[type!=hidden][class!="x-tbar-page-number"]');
Ext.each(all, function(o, i, all) { // 遍历并添加enter的监听
        Ext.get(o).addKeyMap( {
            key :13,
            fn : function() {
            try {
                all[i + 1].focus();
            } catch (e) {
                event.keyCode = 9;
            }
            if (all[i + 1] && /button|reset|submit/.test(all[i + 1].type))
                all[i + 1].click(); // 如果是按钮则触发click事件
            return true;
            }
        })
        });

document.body.focus(); // 使页面获取焦点，否则下面设定默认焦点的功能有时不灵验
try {
    var el;
    if (typeof eval(xFocus) == 'object') { // 如果传入的是id或dom节点
        el = Ext.getDom(xFocus).tagName == 'input' ? Ext.getDom(xFocus) : Ext.get(xFocus).first('input', true); // 找到input框
    } else {
        el = all[xFocus || 0]; // 通过索引号找
    }
    el.focus();
} catch (e) {
}
}
Ext.isReady ? run() : Ext.onReady(run); // 页面加载完成后添加表单导航
}

具体使用就是在页面的js最后加上keyNav(Ext.getCmp("name")); //name可以是第一个输入项的名称

一般在查询按钮点击之后，要将焦点切换到Grid的第一行，然后支持键盘上下键选行，并且在Enter（回车）键按下后选中该行并返回，当然这其中还应该包括鼠标单击选行、双击选中返回。

grid.getSelectionModel().selectFirstRow();//选中第一行并获得焦点
row = grid.getView().getRow(0);
var element = Ext.get(row);
element.focus();

grid.on('dblClick', function() {//双击选中
    getSelectedInfo();
});

var el =Ext.get('grid');//回车键选中
var map = new Ext.KeyMap(el, {
    key: 13,
    fn: function(){
        getSelectedInfo();
    }
});

function getSelectedInfo(){//返回选择记录的信息
    var record = grid.getSelectionModel().getSelected();
    if(typeof(record) != "undefined"){
        window.returnValue = record.get("name")+ ";" + record.get("id");
        window.close();
    }
}

 

注意，刚才测出一个bug，当用jsonReader加载动态数据的时候，选中第一行并获得焦点出错，原因是ds.load还没有加载完成就执行了focus，修改如下：
ds.load( {
        callback : function(r, options, success) {
        if (success == false) {
            Ext.Msg.alert("错误", "加载数据出错.");
        } else {
            grid.getSelectionModel().selectFirstRow();// 选中第一行并获得焦点
            row = grid.getView().getRow(0);
            var element = Ext.get(row);
            if (typeof (element) != "undefined" && element != null) {
                element.focus();
            }
        }
        }
    });