下面我们来了解一下关于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+",被移除!"); } } );