ExtJS中防止包容元素其间的事件屏蔽-JavaSript-爱易网页

ExtJS中防止包容元素其间的事件屏蔽

日期：2014-05-16　浏览次数：20487 次

ExtJS中防止包容元素之间的事件屏蔽

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({

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ExtJS中防止包容元素其间的事件屏蔽

相关资料更多>

推荐阅读更多>