网格& # 39;keydown # 39;事件不能捕捉特殊的键,如方向键、Enter键或Tab键
Grid 'keydown' event doesn't catch special keys like arrow keys or Enter or Tab
我在'keydown'事件上捕获特殊键有问题。但如果我使用'keyup'事件,除了我不能使用它,一切都很好。似乎有些控制抓住了这个事件,并停止了其他事件的进行?为什么?
Ext.onReady(function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'phone', type: 'string', mapping: 'phoneNumber' }
]
});
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
var myStore = new Ext.data.Store({
autoLoad: true,
storeId: 'myStore',
model: 'User',
data: data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
var main = Ext.create('Ext.container.Viewport', {
renderTo: document.body,
layout: 'fit',
items:
[
{
xtype: 'panel',
title: 'Main Panel',
items: [
{
xtype: 'gridpanel',
id: 'myGrid',
name: 'myGrid',
title: 'My Grid',
store: 'myStore',
selModel: Ext.create('Ext.selection.CellModel', {
mode: 'SINGLE',
listeners: {
select: {
element: 'el',
fn: function (editor, object, options) {
}
}
}
}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
edit: {
element: 'el',
fn: function (editor, object, options) {
}
}
}
})
],
flex: 1,
listeners: {
keydown: {
element: 'el',
fn: function (eventObject, htmlElement, object, options) {
var pGrid = Ext.ComponentMgr.get('myGrid');
if (eventObject.keyCode == 40) // 13, 9
{
if (pGrid.selModel.getCurrentPosition().row == pGrid.store.data.length - 1) {
pGrid.store.add({ name: '', age: '', zipcode: '' });
}
}
}
}
},
columns: [
{
xtype: 'numbercolumn',
dataIndex: 'id',
header: 'ID',
sortable: true,
width: 100,
id: 'id',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
header: 'Name',
sortable: true,
width: 100,
id: 'name',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
header: 'Phone',
sortable: true,
width: 100,
align: 'right',
id: 'phone',
editor: {
xtype: 'textfield'
}
}
]
}]
}]
});
});
只是一个想法。你试过KeyPress而不是KeyDown吗?
KeyNav是一个导航包装器,允许您将导航键直接绑定到函数调用。API文档中有很好的示例来说明如何使用它:
http://docs.sencha.com/ext-js/4-0//api/Ext.util.KeyNav
相关文章:
- 如何在用户按下F5键或单击浏览器时显示自定义的fancybox's后退/关闭按钮
- 为左键或右键单击附加事件侦听器-onclick'右键单击无效
- 按左键或右键无法更改颜色
- 按下esc键或随机单击鼠标时,Jcrop失去焦点
- 用防油键或防篡改键触发键盘事件
- 合并共享公共键或值的对象
- 在 jquery 中,如何通过索引[“键”] 或值删除数组元素
- 哪个事件将最快和最一致地触发 - matchMedia,window.resize,方向更改或两者兼而有之
- 谷歌地图搜索框结果通过点击输入键或点击按钮
- 灯箱触发事件以单击空格键或鼠标左键单击
- 通过esc键或外部点击检测jquery显示插件模式关闭
- 按下退格键或删除键时如何执行操作
- 使用油脂/夯实键(或其他扩展)来省略web元素中的某些字符
- 跟踪是否在输入字段中按了退格键或删除键
- 在文本框上按删除键或退格键获取删除的字符或文本
- 如何按F5键或刷新页面清除文本框中输入的值?(不使用btnReset)
- React原生路由器flux:覆盖组件内部的左键或右键,并访问本地功能
- 根据当前选择的图像使用方向键移动灯箱图像
- 如何使用实体键(或其他对象)从html javascript调用
- 网格& # 39;keydown # 39;事件不能捕捉特殊的键,如方向键、Enter键或Tab键