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
}
});*/
});
分享到：
相关推荐
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
在实际开发中，ExtJS通常与MVC（模型-视图-控制器）架构模式结合使用，这有助于分离业务逻辑、界面展示和数据处理，提高代码组织的清晰度和可维护性。同时，由于ExtJS是一个基本与后台技术无关的前端框架，它可以与...
extjs-basex.js extjs-basex.js extjs-basex.js
使用这个主题，开发者可以快速地为 EXTJS4 应用程序赋予 Bootstrap 风格的外观，同时保持 EXTJS4 的强大功能和组件灵活性。 在 "extjs-theme-bootstrap-master" 压缩包文件中，可能包含以下内容： 1. `app` 目录：...
extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4
extjs-4.1.1 ExtJs所有文档及库文件，在官网下的，这个版本很好，放在这方便大家下载！
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
extjs-6.5.3离线API文档，是学习和开发的必要工具。希望有所帮助！
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。功能丰富，无人能出其右。无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列...
extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版
ExtJS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件和功能，用于构建富客户端Web应用。Bootstrap 是一个流行的前端开发框架，用于快速构建响应式和移动优先的网站。"extjs-theme-bootstrap-...
开发者可以通过查阅API，了解每个组件的功能、用法以及与其他组件的交互方式。这对于编写高质量、可维护的代码至关重要。 5. **其他文档** 除了API文档，可能还包括开发者指南、最佳实践、迁移指南等，这些文档...
Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926
之前的框架的核心（数据、控制器、模型等等）已被调和为一个单一的公共平台。这样，数据和逻辑就能共享，从而帮助开发人员进一步去优化他们的应用程序。 那些具有独特功能的东西将会被分解为两个绝然不同的两个工具...
文档通常会详细解释每个组件的用法、配置选项、事件处理以及API函数等，帮助开发者快速上手并深入理解框架。 5. **示例代码** 通常，ExtJS的示例代码可以帮助开发者了解如何在实际项目中应用框架。通过查看和运行...
让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**：ExtJS是由Sencha公司开发的一个强大的前端UI框架，它提供了丰富的组件库，可以构建出功能复杂、交互性强的Web应用。框架支持数据绑定...
extjs-4.1.1为extjs官方免费版,解压之后引入对应的css和js即可使用
ExtJS 的核心特性包括组件化设计、数据绑定、丰富的UI组件、强大的表单处理、灵活的布局管理以及响应式设计。在6.2.0 版本中，这些方面可能有所增强和完善： 1. **组件系统**：ExtJS 采用组件化开发模式，允许...
ExtJS-6.2.0官方离线API文档