ExtJS入门知识进阶三

最新推荐文章于 2020-06-07 21:39:58 发布

最新推荐文章于 2020-06-07 21:39:58 发布 · 169 阅读

文章标签：

#EXT #JavaScript #CSS #JSP #HTML #ViewUI

ExtJS 专栏收录该内容

7 篇文章

订阅专栏

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