ExtJS中的KeyNav和KeyMap是两个用来处理键盘事件的类，它们默认的工作模式都是屏蔽了浏览器的默认事件和事件起泡的。即如下的默认配置。
KeyMap: stopEvent: true,
KeyNav: defaultEventAction: stopEvent,
所以当我们有两层或者三层的包容元素需要使用相同的键盘键相应事件时，就会发生，内层元素屏蔽了外层包容元素的事件响应，究其原因，就是ExtJS阻止了事件起泡至外层的包容元素。
本例当中，使用相同的键盘键“Key Down”来分别响应TabPanel的tab切换，FormPanel的焦点切换，ComboBox的选项选择。使用键盘键"Enter"进行三种模式之间的切换。
程序运行结果如下：
1. Tab切换
2. Form焦点切换
3. ComboBox选项选择
程序代码如下
<html>
<head>
<title>Event Conflict Solve</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.namespace('Ext.exampledata');
Ext.exampledata.states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"]
];
/*
* Avoid event conflict bettween contained elements and containg element.
* TODO: Add a tips for which mode we are working at
* (try to use a property change event to fulfill this fuctionality?).
*/
Ext.onReady(function(){
MyCombox = Ext.extend(Ext.form.ComboBox, {
initEvents : function(){
Ext.form.ComboBox.superclass.initEvents.call(this);
this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
if (MOVE_MODE != MOVE_MODE_COMB) {
return;
}
this.selectPrev();
e.stopPropagation();
},
"down" : function(e){
if (MOVE_MODE != MOVE_MODE_COMB) {
return;
}
this.selectNext();
e.stopPropagation();
},
"enter" : function(e){
if(!this.isExpanded()){
this.onTriggerClick();
MOVE_MODE = MOVE_MODE_COMB;
} else {
this.onViewClick();
MOVE_MODE = MOVE_MODE_FORMS;
}
e.stopPropagation();
},
scope : this,
forceKeyDown : true,
defaultEventAction: 'preventDefault'
});
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
if(this.typeAhead){
this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
}
if(!this.enableKeyEvents){
this.mon(this.el, 'keyup', this.onKeyUp, this);
}
}
});
Ext.reg("myComb", MyCombox);
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states // from states.js
});
var activeTabIndex = 0;
var formFieldFocusIndex = 0;
var MOVE_MODE_TABS = 1;
var MOVE_MODE_FORMS = 2;
var MOVE_MODE_COMB = 3;
var MOVE_MODE = MOVE_MODE_TABS;
var firstForm = new Ext.form.FormPanel({
border: false,
id: 'firstForm',
labelAlign: 'right',
defaultType: 'textfield',
items: [{
id: "txtFirstName",
fieldLabel: "First Name",
width: 180
}, {
fieldLabel: "Last Name",
width: 180
}, {
fieldLabel: "Gender",
width: 180
},{
xtype: "myComb",
id: "cmbHobbies",
fieldLabel: "Hobbies",
editable: false,
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width: 180
}, {
xtype: "checkbox",
fieldLabel: "Particpate"
}]
});
var tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: activeTabIndex,
id: 'tabs',
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'FromTab1',
items: firstForm
},{
title: 'FromTab2',
html: "My content was added during construction."
},{
title: 'FromTab3',
autoLoad:'ajax1.htm'
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
},{
title: 'Event Tab',
html: "I am tab 4's content. I also have an event listener attached."
}
]
});
firstForm.items.item(formFieldFocusIndex).focus();
new Ext.KeyMap('firstForm', [
{
key: Ext.EventObject.DOWN,
handler: function(key, e) {
if (MOVE_MODE != MOVE_MODE_FORMS) {
return;
}
formFieldFocusIndex++;
if (formFieldFocusIndex >= this.items.getCount()) {
formFieldFocusIndex = 0;
}
this.items.item(formFieldFocusIndex).focus();
e.stopPropagation();
},
scope: firstForm,
stopEvent: false
},
{
key: Ext.EventObject.UP,
handler: function(key, e) {
if (MOVE_MODE != MOVE_MODE_FORMS) {
return;
}
formFieldFocusIndex--;
if (formFieldFocusIndex < 0) {
formFieldFocusIndex = this.items.getCount() - 1;
}
this.items.item(formFieldFocusIndex).focus();
e.stopPropagation();
},
scope: firstForm,
stopEvent: false
}
]);
new Ext.KeyMap('tabs', [
{
key: Ext.EventObject.DOWN,
handler: function(key, e) {
if (MOVE_MODE != MOVE_MODE_TABS) {
return;
}
activeTabIndex++;
if (activeTabIndex > this.items.getCount() - 1) {
activeTabIndex = 0;
}
this.setActiveTab(activeTabIndex);
},
scope: tabs,
stopEvent: true
},
{
key: Ext.EventObject.UP,
handler: function(key, e) {
if (MOVE_MODE != MOVE_MODE_TABS) {
return;
}
activeTabIndex--;
if (activeTabIndex < 0) {
activeTabIndex = this.items.getCount() - 1;
}
this.setActiveTab(activeTabIndex);
},
scope: tabs,
stopEvent: true
}
]);
new Ext.KeyMap(document, [
{
key: Ext.EventObject.ENTER,
handler: function(key, e) {
//var target = null;
var activeTab = tabs.getActiveTab();
var curTabElement = null;
var curExtCtl = null;
for (var i = 0; i < tabs.items.getCount(); i++) {
//curTabElement = tabs.items.item(i).el;
//var selecter = "DIV[id='" + tabs.items.item(i).id + "']";
//target = e.getTarget(selecter, document.body, true);
curTabElement = tabs.items.item(i);
if (curTabElement === activeTab) {
curExtCtl = tabs.items.item(i);
break;
}
}
if (curExtCtl == null) {
return;
}
if (curExtCtl.items.getCount() < 1) {
return;
}
var curExtForm = curExtCtl.items.item(0);
if (curExtForm.getXType() == 'form') {
if (curExtForm.items.getCount() < 1) {
return;
}
formFieldFocusIndex = 0;
curExtForm.items.item(formFieldFocusIndex).setValue("");
curExtForm.items.item(formFieldFocusIndex).focus();
}
if (MOVE_MODE == MOVE_MODE_FORMS) {
MOVE_MODE = MOVE_MODE_TABS;
} else {
MOVE_MODE = MOVE_MODE_FORMS;
}
},
scope: tabs,
stopEvent: "preventDefault"
}
]);
});
</script>
</head>
</html>
- 大小: 32.9 KB
- 大小: 36 KB
- 大小: 39 KB
分享到：
相关推荐
在Ext JS中，我们可以为任何具有DOM元素的组件添加click事件监听器。对于Panel来说，click事件可以监听在Panel的整个区域，或者特定的元素上，如标题、工具栏按钮等。 要重写Panel并添加click事件，我们首先需要...
通过上述介绍，我们可以看到，在ExtJs中获取表单元素的值是一项基本而重要的技能。无论是简单的值读取还是复杂的表单管理，都离不开对`getValues()`等核心函数的熟练运用。希望本文能够帮助您更好地理解和掌握ExtJs...
在EXTJS中，每个组件（Component）都可以注册事件监听器。开发者可以使用`on`方法来监听特定事件，例如： ```javascript Ext.Component.on('click', function(event, component) { console.log('Component was ...
它提供了一整套组件化的用户界面元素和强大的数据绑定机制，使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了"ExtJS实用开发指南"、"EXT 中文手册"以及"Ext Core手册"，涵盖了ExtJS的基础到高级...
2. **数据绑定**：ExtJS支持双向数据绑定，使得视图和模型之间的数据同步变得简单。数据源可以是JSON、XML或其他数据格式，与服务器端的数据交互也十分便捷。 3. **布局管理**：框架内置了多种布局方式，如Fit布局...
首先，了解ExtJS中的事件系统至关重要。事件系统是ExtJS框架的核心部分，它允许组件之间进行通信。在ExtJS中，每个组件都有自己的事件，如`click`、`mousedown`、`mouseup`等。开发者可以为这些事件添加监听器来执行...
- 在ExtJs中，可以使用`on`方法来监听DOM元素或Ext组件的事件。例如，监听ID为'somelink'的元素的点击事件，可以这样写： ```javascript var el = Ext.get('somelink'); el.on('click', function() { alert('...
2. 耦合性低：EXTJS中基于事件的编程可以降低代码之间的耦合度，使得代码更加灵活和可维护。 3. 重用性强：EXTJS中基于事件的编程可以使得代码具有高度的重用性，开发者可以轻松地重用已经编写的代码。 EXTJS中基于...
Extjs 中文API文档，有对Extjs相关API的中文说明
9. **事件处理**：ExtJS的事件模型使得组件之间的交互变得简单，开发者可以监听和响应各种用户操作。 10. **国际化支持**：虽然这里的API手册是中文版，但ExtJS本身支持多语言，方便不同地区用户使用。 尽管3.3...
Extjs中文文档，包含Extjs的基本语法和各个类的详细说明以及用法。
在中文帮助文档中，你可以找到关于布局管理、表单元素、数据绑定、图表组件、菜单、工具栏、面板、窗口等核心功能的详细说明。 ExtJS的英文API（ExtJS.chm）则为英文环境下的开发者提供了原汁原味的技术文档。API...
在深入探讨ExtJs2.0的具体知识点之前，需要明确ExtJs2.0中文手册的主要内容涵盖了框架的安装、配置、组件使用方法、事件处理、数据管理以及高级应用开发等方面。 首先，ExtJs2.0中文手册应该会介绍如何安装和配置...
- **Grid介绍**：Grid组件是ExtJS中用于展示表格数据的核心组件。 - **数据定义**：包括定义数据源、列模型等内容。 - **分页功能**：Grid组件支持内置的分页功能，可以轻松实现数据的分页显示。 #### 16. EXTMenu...
在《ExtJs 实例》中，你将找到各种实际应用场景的代码示例，这些实例涵盖了ExtJs的各种组件和功能。通过学习这些实例，你可以更好地理解如何在实际项目中应用ExtJs，例如如何创建网格（Grid）、表单（Form）、树形...
**Widgets**是ExtJs中的UI组件，提供了丰富的界面元素。 ##### **5.1 MessageBox** - **展示信息框**: ```javascript Ext.MessageBox.show({ title: 'Hello', msg: 'This is a message box.', buttons: Ext....
3. **连接线**：工作流元素之间通常需要通过连接线表示流程流转。ExtJS提供了绘图API，可以用来绘制和管理这些连接线，例如使用`Ext.draw.Path`。 4. **属性面板**：用户需要能够编辑选定的工作流元素属性。ExtJS的...
事件机制是ExtJS中的核心组成部分，它使得用户界面元素能够响应用户的交互行为。本篇笔记将深入探讨ExtJS的事件处理，包括事件登记、事件对象、this的作用域以及ExtJS特有的事件管理方式。 1. **事件登记**： - **...