论坛首页 Web前端技术论坛

Ext2中Grid实现键盘导航

浏览 2940 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-10-31  

接着完善Ext2中实现全页面键盘导航,一般在查询按钮点击之后,要将焦点切换到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();
            }
        }
        }
    });

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics