下面我们来了解一下关于Ext中的事件
1、DOM事件--鼠标点击事件：
<link rel="stylesheet" type="text/css"
href="ext-3.1.1/resources/css/ext-all.css" />
<script type="text/javascript"
src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript" src="index01.js"></script>
</head>
<body>
<a href="#" id="domtest">DOM事件测试</a>
</body>
</html>
Ext.onReady(//页面载入时
function(){
Ext.get("domtest").on("click",//当触发点击事件时
function(e){
alert("点击事件发生了！target="+e.target+",type="+e.type);
}
);
}
);
调用on函数时改变函数内部this对象
function MyClass(){
this.a = "这是a属性！";
}
Ext.onReady(
function(){
var myobj = new MyClass();
Ext.get("domtest").on("click",
function(e){
alert("点击事件发生了！a = "+this.a);
},
myobj //scope对象，即指定处理函数内部的this对象
);
}
);
2、事件的传播
preventDefault缺省行为表示不去执行它的连接地址some.jsp，stopPropagation阻止事件的传播，阻止这个点击事件传播到其他元素中。
<span id="somespan">
<a href="some.jsp" id="domtest">DOM事件测试</a>
</span>
function MyClass(){
this.a = "这是a属性！";
}
Ext.onReady(
function(){
var myobj = new MyClass();
Ext.get("domtest").on("click",
function(e){
alert("点击事件发生了！a = "+this.a);
},
myobj, //scope对象，即指定处理函数内部的this对象
{preventDefault: true,stopPropagation: true} //可选的配置对象
);
//如果停止事件的传播，则，在它上层的对象无法得到对应的事件
Ext.get("somespan").on("click",
function(){
alert("Span被点击了!");
}
);
}
);
这样上面的例子就只能回弹出domtest元素的点击事件。
如果将上面的可选的配置对象去掉，则会依次弹出domtest元素点击事件，somespan的点击事件，和访问some.jsp
3、利用Ext中基类Observable自定义事件：
主要目的是当我点击添加用户时，可以向下面的表格中动态的添加一条刚才所添加的用户信息，点击删除就从下面的表格中将移除一条用户信息。
下面jsp页面：
username: <input type="text" id="username">
password: <input type="password" id="password"> <br>
<a href="#" id="addUserBtn">添加用户</a>
<a href="#" id="delUserBtn">删除用户</a> <br>
<table id="usersTable">
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
</table>
下面来看看我们js文件:
//定义一个User类
var User = function(){
this.username = "";
this.password = "";
}
//定义一个UserManager类
var UserManager = Ext.extend(Ext.util.Observable,{//只有继承了Observable才有自定义事件处理功能
constructor: function(){
//必须先声明能够处理哪些事件
this.addEvents("addUser","delUser");
//私有成员
var users = [];
//公有方法
this.addUser = function(user){
users[users.length] = user;
//alert("用户["+user.username+"]已添加");
this.fireEvent("addUser",this,user);//父类里面的方法，向外抛出事件
}
//公有方法
this.delUser = function(username){
for(var i=0; i<users.length; i++){
var user = users[i];
if(username == user.username){
users.remove(user);
this.fireEvent("delUser",this,user);//父类里面的方法，向外抛出事件
}
}
}
//公有方法
this.getUsers = function(){
return users;
}
}
});
Ext.onReady(
function(){
var um = new UserManager();
//自定义事件及事件的处理函数
um.on("addUser",alertUserCount);//父类Observable中on方法
um.on("delUser",alertUserCount);
um.on("addUser",appendResult);
um.on("delUser",removeResult);
//接收addUserBtn元素的点击事件
Ext.get("addUserBtn").on("click",
function(e){
var u = new User();
u.username = Ext.getDom("username").value;
u.password = Ext.getDom("password").value;
um.addUser(u);
}
);
//接收delUserBtn点击事件
Ext.get("delUserBtn").on("click",
function(e){
var username = Ext.getDom("username").value;
um.delUser(username);
}
);
//自定义事件的处理器
function alertUserCount(usermgr){
//alert("现在已有【"+usermgr.getUsers().length+"】个用户");
}
//自定义事件的处理器
function appendResult(usermgr,user){
var dh = Ext.DomHelper;//ext中一个dom辅助工具类
dh.append("usersTable",{//append向指定dom元素中添加元素
id:"user_"+user.username,
tag:"tr",
children:[
{tag:"td",html:user.username},
{tag:"td",html:user.password}
]
});
}
function removeResult(usermgr,user){
Ext.removeNode(Ext.getDom("user_"+user.username));
alert("user_"+user.username+",被移除！");
}
}
);
分享到：
相关推荐
8. **ExtJS入门教程(超级详细)**： 这可能是全面的ExtJS 3.x教程，涵盖了从基础到进阶的所有内容，包括组件体系、布局管理、数据绑定、AJAX通信、事件处理等。 通过深入学习以上知识点，你将能够熟练地运用ExtJS 3...
### Extjs实用教程入门学习详解 #### 极致解析Extjs框架的核心价值与应用场景 **Extjs**，作为一款杰出的Ajax框架，以其强大的...无论是新手入门还是进阶提升，Extjs都是值得投入时间和精力去探索和学习的优秀工具。
再来看“ExtJs教程_完整版 pdf版.pdf”，这很可能是EXTJS的一个全面教程，不仅包含入门知识，还可能涉及更高级的主题，如EXTJS的MVC架构、图表、Ajax通信、国际化、性能优化等。这些进阶主题对于提升EXTJS开发技能至...
本学习资料主要涵盖了ExtJS的基础知识、进阶技巧以及实际开发应用。 《ExtJS6.0开发培训.docx》： 这份文档详细介绍了ExtJS 6.0版本的特性，包括模块化设计、多设备支持（Modern and Classic Toolkit）、可扩展的...
《ExtJS入门教程(超级详细).pdf》则是一个适合初学者的资源，它以详细的方式引导读者从零开始学习ExtJS。教程可能包括安装环境、创建第一个应用、理解基本组件的使用方法，以及逐步进阶到更复杂的主题，如远程数据...
总的来说，"extJS 一些简单实例"这个主题涵盖了使用ExtJS进行Web开发的基础知识，包括组件、数据绑定、应用配置等方面，适合初学者入门和进阶者巩固。通过学习和实践这些实例，开发者可以掌握创建交互式Web界面的...
3. **ExtJS实用开发指南.chm**与**ExtJS实用开发指南.pdf**：这两个文件可能提供了实用的开发技巧和案例，帮助开发者在实际项目中应用ExtJS。它们可能包含了最佳实践、常见问题解决方案以及复杂的组件使用示例，对...
本书结合理论与实践，非常适合初学者快速入门，也适合有一定基础的开发者进阶提升。 #### 五、总结 《Learning ExtJS》是一本全面介绍ExtJS框架的经典教材，不仅涵盖了基础知识，还涉及了许多高级话题。对于希望...
总的来说，"Extjs电子教程集合"是一个全面的学习资源库，涵盖了从入门到进阶的各个方面，适合不同水平的ExtJS开发者。通过这些教程和实例，你可以逐步掌握ExtJS的强大功能，打造高性能、交互性强的Web应用程序。在...
#### 新手入门与进阶 对于初学者而言，熟悉ExtJS的基本概念和工作流程至关重要。首先，获取ExtJS库文件是开始的第一步。官方提供了不同版本的下载，本教程推荐使用2.0版本。下载并解压后，开发者将获得一系列关键...
1. **入门教程**：介绍如何设置开发环境，创建第一个ExtJS应用，以及基本的组件使用。 2. **组件详解**：详细讲解各个组件的属性、方法和事件，帮助开发者深入理解并运用到实际项目中。 3. **数据管理**：讲述如何...
总之，《深入浅出ExtJS第2版（完整版）》是一部全面而深入的ExtJS学习指南，它不仅适合于想要入门的初学者，也适合于希望进阶的资深开发者，无论是在理论知识的讲解还是实践操作的引导上，都力求做到深入浅出，让...
### Extjs4.0 学习指南核心知识点详解 #### 一、Extjs4.0 简介与基础知识 **1.1 获取 Extjs** ...通过上述步骤，你可以快速入门 Extjs 并构建基本的 Web 应用程序。随着进一步学习，你会接触到更高级的概念和技术。
Sencha 提供了详细的文档和教程，涵盖了从入门到进阶的所有主题。 #### 十、基本知识以外 除了基本的操作之外，还有一些高级技巧值得探索，例如如何利用构建脚本来扩展构建流程、如何优化应用程序性能等。 #### ...
### Extjs4.0 权威指南 - 中文版知识点详解 #### 一、Extjs4.0 ...通过这些示例，读者可以快速入门并掌握 Extjs4 的基本操作。随着进一步的学习和实践，你将能够利用 Extjs4 开发出更复杂、更强大的 Web 应用程序。
ExtJS是一种基于JavaScript的前端框架，用于构建富...总之，这个压缩包提供了一个全面的学习资源库，覆盖了从入门到进阶的所有关键知识点。通过系统地学习和实践，你将能够熟练掌握ExtJS，开发出高质量的Web应用程序。
总结起来，《深入浅出ExtJS（第2版）》这本书应该涵盖了ExtJS的基础知识、核心特性以及实际应用案例等内容，适合希望深入了解并掌握该框架的开发者阅读。通过本书的学习，相信读者能够更好地利用ExtJS的强大功能来...
- **本教程**：本教程为初学者提供了详细的ExtJS入门指南，覆盖了新手入门、组件使用、示例应用等多个方面。 - **在线文档**：ExtJS官网提供了全面的API文档和技术文档。 - **社区论坛**：参与ExtJS社区讨论，可以...
结合这些资料，你将能够全面掌握使用ExtJS 3.0.0进行Web开发所需的基础和进阶技能。 总之，ExtJS 3.0.0是一个强大的JavaScript框架，它利用Ajax技术和面向对象的JavaScript，提供了丰富的组件和易用的API，帮助...