關(guān)于ExtJS4.1:快捷鍵支持的問題
更新時(shí)間：2013年04月24日 09:18:54 作者：
本篇文章小編為大家介紹，關(guān)于ExtJS4.1 快捷鍵支持的問題。需要的朋友參考下
問題一個(gè)頁面有兩個(gè)面板，都有一個(gè)【添加(F2)】按鈕，如何做快捷鍵支持？圖片示意
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。'
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。'
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2沒有效果；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2同樣沒有效果。
第二次實(shí)現(xiàn)
原來是div元素必須增加tabindex=0的屬性才行。
代碼示例
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2沒有效果；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2就有效果了。
第三次實(shí)現(xiàn)
要解決打開瀏覽器之后不用點(diǎn)擊div就能識(shí)別快捷鍵，需要手動(dòng)調(diào)用foucs()方法。
代碼示例
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
Ext.get('panelB').focus();
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2有效果了；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2就有效果了。
第一次實(shí)現(xiàn)
感覺應(yīng)該很簡單，ExtJs提供了“Ext.util.KeyMap”，很容易做快捷鍵支持。
代碼示例
復(fù)制代碼 代碼如下:
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。'
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。'
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2沒有效果；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2同樣沒有效果。
第二次實(shí)現(xiàn)
原來是div元素必須增加tabindex=0的屬性才行。
代碼示例
復(fù)制代碼 代碼如下:
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2沒有效果；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2就有效果了。
第三次實(shí)現(xiàn)
要解決打開瀏覽器之后不用點(diǎn)擊div就能識(shí)別快捷鍵，需要手動(dòng)調(diào)用foucs()方法。
代碼示例
復(fù)制代碼 代碼如下:
/// <reference path="Ext/ext-all-debug-w-comments.js" />
Ext.onReady(function () {
var viewport = Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
padding: 10,
items: [{
xtype: 'panel',
id: 'panelA',
title: '快捷鍵測試A',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}, {
xtype: 'panel',
id: 'panelB',
title: '快捷鍵測試B',
tbar: [{
text: '添加(F2)'
}],
frame: true,
flex: 1,
html: '您好，這里顯示的表格或表單 。',
autoEl: {
tag: 'div',
tabindex: 0
}
}]
});
Ext.create('Ext.util.KeyMap', {
target: 'panelA',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加A');
ev.stopEvent();
return false;
}
});
Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
alert('添加B');
ev.stopEvent();
return false;
}
});
Ext.get('panelB').focus();
});
實(shí)際結(jié)果
打開瀏覽器后直接按F2有效果了；打開瀏覽器后用鼠標(biāo)點(diǎn)擊A或B后再按F2就有效果了。
相關(guān)文章
WebStorm中如何將自己的代碼上傳到github示例詳解
這篇文章主要介紹了WebStorm中如何將自己的代碼上傳到github,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能
這篇文章主要為大家介紹了如何通過JavaScript實(shí)現(xiàn)計(jì)算器的四則運(yùn)算功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試試2022-02-02
JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)區(qū)分中英文并統(tǒng)計(jì)字符個(gè)數(shù)的方法,涉及JavaScript事件響應(yīng)、正則匹配及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-06-06![用javascript修復(fù)瀏覽器中頭痛問題的方法整理篇[譯]](http://img.jbzj.com/images/xgimg/bcimg3.png)
用javascript修復(fù)瀏覽器中頭痛問題的方法整理篇[譯]
我們提倡無論何時(shí)都盡可能地使用CSS,這樣我們更容易取得成功.現(xiàn)在瀏覽器對CSS的支持已經(jīng)非常好,肯定足以讓你用來控制你的網(wǎng)頁布局與排版.但,即使如此,還是有某些頁面元素會(huì)在不同的瀏覽器下表現(xiàn)也不一樣.2008-11-11
在for循環(huán)中l(wèi)ength值是否需要緩存
這篇文章主要介紹了在for循環(huán)中l(wèi)ength值是否需要緩存,需要的朋友可以參考下2015-07-07
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點(diǎn)、生成二叉樹示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點(diǎn)、生成二叉樹,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript二叉樹相關(guān)概念、定義、節(jié)點(diǎn)插入、遍歷輸出等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了如何基于viewport vm適配移動(dòng)端頁面,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了BootStrap導(dǎo)航欄問題記錄,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運(yùn)算符中，如果比較的內(nèi)容包含對象類型數(shù)據(jù)，則會(huì)涉及隱式轉(zhuǎn)換，那么就會(huì)調(diào)用toString()函數(shù)和valueOf()函數(shù)，本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別，感興趣的可以了解一下2022-04-04
相信大家都遇到過,在各種圖表框架中經(jīng)常會(huì)有將一段折線平滑的需求,不僅能給用戶帶來一種柔和的感覺,還能美化界面,讓折線看起來沒那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下2021-07-07