ExtJS Button的事件和方法定义

最新推荐文章于 2023-03-13 22:19:00 发布

抢街饭

最新推荐文章于 2023-03-13 22:19:00 发布

阅读量3.7k

点赞数

分类专栏： ExtJs 文章标签： button extjs stylesheet function xhtml html

本文链接：https://blog.csdn.net/lzwjavaphp/article/details/6956060

版权

ExtJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
   Ext.onReady(function(){
		var button = new Ext.Button({
		    //构造函数的参数传入一个字面量- renderTo, text
			//minWidth最小宽度，无论字有多大都是100像素宽度
			//handler:指定一个函数句柄，在默认事件触发时的函数调用
			//此时的默认事件为click
			//这是事件定义的第一种方法
			//Ext.getBody().dom == document.body;
			renderTo: Ext.getBody(),
			text: "确定按钮",
			minWidth: 100,
			icon:"ExtJs/icon-error.gif", //按钮背景图片
			handler: function(){
				Ext.Msg.alert("按钮","巴塞罗那球迷");
			}
		});
   });
</script>
<body>
</body>
</html>

运行显示出来的按钮：

点击确定按钮：

提供的3种按钮方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
   Ext.onReady(function(){
		var buttonA = new Ext.Button({
			renderTo: Ext.getBody(),
			text: "确定按钮",
			minWidth: 100,
			icon:"ExtJs/icon-error.gif", //按钮背景图片
			handler: function(){
				Ext.Msg.alert("按钮","巴塞罗那球迷");
			}
		});
		//text是Ext.Button的只读属性
		//alert(button.text);
		//setText是Ext.Button的设置Text方法
		buttonA.setText("[A]<替换确定按钮>");  //确定被替换取消
		//listeners是在对象在被初始化前，就将一系列事件定义的手段
		//这是事件定义的第二种方法（推荐程度5颗星）
		var buttonB = new Ext.Button({
			renderTo: Ext.getBody(),
			text: "[B]Listeners 按钮测试",
			minWidth:100,
			listeners:{
				"click":function(){
					Ext.Msg.alert("按钮","Listeners 按钮测试");
				}
			}
		});
		//这是事件定义的第三种方法
		var buttonC = new Ext.Button({
			renderTo: Ext.getBody(),
			text: "[C]On方法的事件定义",
			minWidth:100
		});
		buttonC.on("click", function(){
			Ext.Msg.alert("按钮","On方法的事件定义");
		});
   });
</script>
<body>
</body>
</html>

运行结果：