关闭

extjs 事件入门二

195人阅读 评论(0) 收藏 举报

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../lib/ext-all.css" />
	<script type="text/javascript" src="../lib/ext-base.js"></script>
    <script type="text/javascript" src="../lib/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){

		var button = new Ext.Button({
		//renderTo将当前对象所生成的HTML对象存放进指定的对象中
		//document.body和Ext.getBody().dom是相等的
		renderTo:Ext.getBody(),
		text:"确定",
		//宽度后面不用添加px单位,只是数字
		minWidth:200,
		//函数句柄,默认时调用,此时的默认为onclick事件
		handler:function(){
			alert("handler方法的测试,默认事件是onclick事件");
		}
		
		
	});
	
	var button2 = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"测试listeners",
			//listeners是在对象初始化之前就将一系列的事件进行定义,在组件化方面编程很有用
			listeners:{
				"click":function(){
					alert("listeners 方法测试");
				}
			}
		});
	//使用on()方法绑定事件	
	var button3 = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"on click事件"
		});
		
	button3.on("click",function(){
		alert("on绑定事件");
	});
	//读取button对象的属性
	//alert(button.text);
	//改变button对象的属性,只能使用方法,因为这个是只读属性
	button.setText("黄彪");

	//这里的e是EventObject对象,可以默认阻止事件
	Ext.get("num1").on("click",function(e){
		alert("被阻止");
		e.preventDefault();
	});
	
	Ext.get("delay").on("click",function(){
		alert("延迟两秒");
	},this,{delay:2000});
	
	Ext.get("delay1").on("click",function(){
		alert("延迟事件,值响应一次");
	},this,{delay:2000,single:true});
	
	Ext.get("delay2").on("click",function(){
		alert("1000毫秒内响应一次");
	},this,{buffer:1000});
	
	var button4 = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"打开一个新的窗口4"
		});
	var button5 = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"打开一个新的窗口5"
		});
	
	//newWin这个方法默认会传递两个参数
	button4.on("click",newWin);
	button5.on("click",newWin);
	
	var button6 = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"beforeshow事件"
		});
	button6.on("click",function(){
		var win = new Ext.Window({title:"打开一个新的窗口6",width:200,height:200});
		win.on("beforeshow",function(){
			alert("beforeshow");
			//return true;//如果这里返回false就阻止了窗口的显示
			return confirm("要显示窗口吗?");
		});
		win.show();
	});
	
});

//因为EventObject默认传递两个参数——this,事件对象event
function newWin(this_obj,event){
	var win = new Ext.Window({title:this_obj.text,width:200,height:200});
	win.show();
}

</script>
<body>
    <a href="http://www.baidu.com" id="num1">我要跳转到百度页面,但是被住址</a><p>
    <a href="http://www.baidu.com" id="num2">我要跳转到百度页面,不被住址</a>
	<div id="delay">延迟事件</div>
	<div id="delay1">延迟事件,值响应一次</div>
	<div id="delay2">1000毫秒内响应一次</div>
    
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:285479次
    • 积分:8483
    • 等级:
    • 排名:第2299名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:4条
    最新评论