<!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>
