EXTJS - Observable的capture功能(拦截器)以及suspendEvents,resumeEvents的用法

最新推荐文章于 2020-09-07 20:15:45 发布

liulian12363

最新推荐文章于 2020-09-07 20:15:45 发布

阅读量846

点赞数

分类专栏： Javascript/Extjs 文章标签： EXT JavaScript CSS F# HTML ViewUI

Javascript/Extjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. Observable的拦截器功能可以拦截特定对象的事件，虽然没有在实际项目中使用过，但是我觉得这是个很强大很使用的功能. 并且可以根据返回的值来判断在拦截器逻辑调用完成之后，是否调用对象监听器所需执行的函数. 这样我们就可以做一些判断的逻辑进而决定是否应该让被触发的事件响应的监听器函数被调用......觉得好拗口啊，没办法，对extjs不熟悉，词汇匮乏啊.

2. 另外还有两个有趣的函数: suspendEvents()和resumeEvents()

这两个函数的意思分别是: 暂停该对象所有的事件处理，即虽然我触发了事件，但是响应的监听器函数不会被调用.后面一个自然就是恢复所有的时间处理咯..

把相关的代码贴上，便于查看:

首先是person.html

<!-- 
	person.html 
	created on 2011/3/29
-->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>02.basic</title>
        <link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" />
        <script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../extjs3/ext-all.js"></script>
        <script type="text/javascript" src="person.js"></script>
    </head>
    <body>
		<!--
        <button id="walk">walk</button>
        <button id="eat">eat</button>
        <button id="sleep">sleep</button> -->
		<input type='button' id='eat'  value='EAT'></input><br>
		<input type='button' id='walk' value='WALK'></input><br>
		<input type='button' id='sleep' value='SLEEP'></input><br>
		<input type='button' id='compositeArgs' value='ARGS'></input>
		
		<br><br>
		<input type='button' id='captureAndContinue' value='captureAndContinue'></input> <br>
		<input type='button' id='captureNotContinue' value='captureNotContinue'></input> <br>
		<input type='button' id='suspendAll' value='suspendAll'></input> <br>
		<input type='button' id='resumeAll' value='resumeAll'></input> <br>
    </body>
</html>

然后是person.js

/*
 * person.js
 * created on 2011/3/29
 */

Ext.onReady(function(){
    Person = function(name){
		this.name = name;
		this.addEvents('walk','eat','sleep');
	};
	
	Ext.extend(Person,Ext.util.Observable,{
		info : function(event){
			return this.name + 'is' + event + 'ing...'; 
		}
	});
	
	Date.patterns = {
    ISO8601Long:"Y-m-d H:i:s",
    ISO8601Short:"Y-m-d",
    ShortDate: "n-j-Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};
	
	var person = new Person('Solomon-Yin');
	person.on('walk',function(){
		Ext.Msg.alert('event', person.name+' is walking');
	});
	person.addListener('eat',function(something){
		Ext.Msg.alert('event', person.name+' is eating '+something);
	});
	person.on('sleep',function(time){
		Ext.Msg.alert('event', person.name+' will start sleep from '+time.format(Date.patterns.FullDateTime));
	});
	
//	person.purgeListeners();
	
	Ext.get('walk').on('click',function(){
		person.fireEvent('walk');
	});
	Ext.get('eat').on('click',function(){
		person.fireEvent('eat');
	});
	Ext.get('sleep').on('click',function(){
		person.fireEvent('sleep',new Date());
	});

	Ext.get('captureAndContinue').on('click',function(){
		Ext.util.Observable.capture(person,function(){
			alert('capture 1');
			return true;
		});
	});
	
	Ext.get('captureNotContinue').on('click',function(){
		Ext.util.Observable.capture(person,function(){
			alert('capture 2');
			return false;
		});
	});
	
	Ext.get('suspendAll').on('click',function(){
		person.suspendEvents();
	});
	
	Ext.get('resumeAll').on('click',function(){
		person.resumeEvents();
	});
	/*
	var fn = function(e, el, args){
		alert('hahahaha');
		alert(args.testId);
	};
	
	Ext.get('compositeArgs').on('click',fn,this,{
		delay: 3000,
		id: 5
	});
	
	Ext.get('compositeArgs').on({
		'click':{
			fn: fn
		},
		'blur':{
			fn: fn,
			delay: 3000,
			testId: 5
		}
	});*/
});

liulian12363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXTJS - Observable的capture功能(拦截器)以及suspendEvents,resumeEvents的用法

1. Observable的拦截器功能可以拦截特定对象的事件，虽然没有在实际项目中使用过，但是我觉得这是个很强大很使用的功能. 并且可以根据返回的值来判断在拦截器逻辑调用完成之后，是否调用对象监听器所需执行的函数. 这样我们就可以做一些判断的逻辑进而决定是否应该让被触发的事件响应的监听器函数被调用......觉得好拗口啊，没办法，对extjs不熟悉，词汇匮乏啊. 2. 另外还有两个有趣的...
复制链接

扫一扫

专栏目录