extjs 事件入门二

原创 2013年12月04日 10:03:46

 

 

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

EXTJS4.0入门学习

(function () {//页面加载完之后会自动执行这个函数 //自定义一个验证器 Ext.apply(Ext.data.validations,{ age:fun...
  • yezhuanxu
  • yezhuanxu
  • 2016年11月28日 16:01
  • 397

ExtJS快速入门指南

1 ExtJS快速入门指南 一、ExtJS 框架简介...........................................................................
  • heyuanjia520
  • heyuanjia520
  • 2013年11月15日 14:40
  • 18604

extjs的tabpanel事件

extjs的tabpanel的tabchange事件是在标签页转换时发生的事件。以下代码演示了这一事件触发时,如何操作标签页iframe中的元素     tabs2.on('tabchange', ...
  • priestmoon
  • priestmoon
  • 2012年06月22日 14:37
  • 11159

extjs 学习之获取焦点和失去焦点事件

如果是extjs的field , 都有 blur , focus 的事件 var field = Ext.create("Ext.form.field.Text" , {     listener...
  • hlj184
  • hlj184
  • 2015年08月27日 10:44
  • 4242

ExtJS6笔记-第1章入门

Ext JS的认识 1.ExtJS 写起来代码就像 Java 一样,非常严谨,非常面向对象。缺点就是在前端 JS 库中属于比较重量级 2.Ext JS 就是一个客户端的 JavaScript 框架  ...
  • nanYangTangHeGuoTan
  • nanYangTangHeGuoTan
  • 2017年02月04日 13:23
  • 1392

ExtJs4回车事件监听

{ xtype:"textfield", labelWidth:60, fieldLabel:"菜单名称", selectOnFocus:true, listeners:{ special...
  • mxj588love
  • mxj588love
  • 2016年04月14日 09:11
  • 370

ExtJS入门之二 事件

张志敏 我是一个靠谱的程序员, 目前关注 MonoTouch、 Mono for Android、 Silverlight、 ASP.NET MVC 以及 NHibernate。已经转到 git...
  • evilcry2012
  • evilcry2012
  • 2016年03月01日 15:12
  • 132

Extjs textfiled 失去焦点用法

失去焦点,采用listeners监听  listeners: {"blur":function (){//添加监听} function addjiuye(){  var window = new Ex...
  • winerdaxian
  • winerdaxian
  • 2011年04月01日 13:41
  • 7404

ExtJs从入门到精通

  ExtJs从入门到精通(作成中)1、入门篇    ①窗口Window及对话框MessageBox      地址:http://www.myext.cn/Article/61.html     ②...
  • szwangdf
  • szwangdf
  • 2009年05月08日 12:26
  • 1629

ExtJS入门之二 事件

 原文:http://www.cnblogs.com/beginor/archive/2008/03/07/1095887.html 事件是指一个特定的动作,这个动作可以针对HTML元素的,如keyd...
  • uciqxkj
  • uciqxkj
  • 2008年12月05日 14:42
  • 656
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:extjs 事件入门二
举报原因:
原因补充:

(最多只允许输入30个字)