在extjs4.1问题:快捷键支持
有一个页面有两个面板,所有都带有F2按钮,以及如何做快捷键支持图片第一个实现
感觉应该是简单的,ExtJS提供ext.util.keymap,而且很容易做到快捷键支持。
代码示例
复制代码代码如下所示:
X
Ext.onReady(function(){()
var = ext.create视口视口,{('ext.container。
布局:{
类型:'vbox,
对齐:'stretch
},
填充:10,
项目:{
Xtype:'panel,
身份:'panela,
标题:快捷键测试A,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。
{ }。
Xtype:'panel,
身份:'panelb,
标题:快捷键测试B,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。
} }
});
ext.create('ext.util keymap,{。
目标:'panela,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding);
Ev.stopEvent();
返回false;
}
});
ext.create('ext.util keymap,{。
目标:'panelb,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding B);
Ev.stopEvent();
返回false;
}
});
});
实际结果
打开浏览器后直接按下F2就没有作用了;打开浏览器后,用鼠标单击A或B,然后按F2键也不会有效果。
二实现
原来,div元素必须增加TabIndex属性= 0。
代码示例
复制代码代码如下所示:
X
Ext.onReady(function(){()
var = ext.create视口视口,{('ext.container。
布局:{
类型:'vbox,
对齐:'stretch
},
填充:10,
项目:{
Xtype:'panel,
身份:'panela,
标题:快捷键测试A,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。,
AutoEl:{
标签:'div,
作用:0
}
{ }。
Xtype:'panel,
身份:'panelb,
标题:快捷键测试B,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。,
AutoEl:{
标签:'div,
作用:0
}
} }
});
ext.create('ext.util keymap,{。
目标:'panela,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding);
Ev.stopEvent();
返回false;
}
});
ext.create('ext.util keymap,{。
目标:'panelb,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding B);
Ev.stopEvent();
返回false;
}
});
});
实际结果
打开浏览器后,直接按下F2就无效了;打开浏览器后,单击A或B按F2键,然后按下这个效果。
Third realization
如果没有点击div打开浏览器的快捷键后,您需要手动焦点()方法。
代码示例
复制代码代码如下所示:
X
Ext.onReady(function(){()
var = ext.create视口视口,{('ext.container。
布局:{
类型:'vbox,
对齐:'stretch
},
填充:10,
项目:{
Xtype:'panel,
身份:'panela,
标题:快捷键测试A,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。,
AutoEl:{
标签:'div,
作用:0
}
{ }。
Xtype:'panel,
身份:'panelb,
标题:快捷键测试B,
对象:{ {
文本:添加(F2)
} },
框架:真实,
Flex:1,
HTML:Hello,这里显示的窗体或窗体。,
AutoEl:{
标签:'div,
作用:0
}
} }
});
ext.create('ext.util keymap,{。
目标:'panela,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding);
Ev.stopEvent();
返回false;
}
});
ext.create('ext.util keymap,{。
目标:'panelb,
关键词:ext.eventobject.f2,
函数(键,EV){
警报('adding B);
Ev.stopEvent();
返回false;
}
});
ext.get('panelb)重点();
});
实际结果
打开浏览器后,按下F2键是有效的;打开浏览器后,单击a或b以单击F2。