<!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(){
Ext.get("btn").on("click", function(){
Ext.MessageBox.alert("对话框", "我被点击了");
})
});
</script>
<body>
<input type="button" value="ExtJs按钮请点击我" id="btn" />
</body>
</html>
点击:
弹出结果如下:
(1) Ext.get(Mixd element) :根据HTML标签的id属性来获取Ext.element对象,Ext.element
是对DOM的封装,另外参数也可以是Ext.Element对象或者DOM节点对象
(2) on(String eventName, Function fn):为Ext.Element对象定义一个事件,eventName是事件名称(“change”,”keypress”),fn为事件处理函数。
<!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(){
Ext.get("btn").on("click", function(){
var name = Ext.get("name").dom.value;
Ext.MessageBox.alert("20强", "11号"+name+"进行一场生死战");
})
});
</script>
<body>
<input type="text" id="name"><br>
<input type="button" value="20强比赛" id="btn">
</body>
</html>
运行结果:
点击按钮:
Ext.Element.dom: dom属性是Ext.Element对象的dom表示