最简单的按钮实例，点击就弹出窗口。
button.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Button</title>
<link rel="stylesheet" type="text/css" href="exts/ext-all.css" />
<script type="text/javascript" src="exts/ext-base.js" ></script>
<script type="text/javascript" src="exts/ext-all.js" ></script>
<script type="text/javascript" src="js/button.js" ></script>
</head>
<body>
<div id="btn"></div><br/>
<div id="win"></div>
</body>
</html>
button.js:
Ext.onReady(function(){
function btnHandler(){
var win = new Ext.Window({
el:'win',
title: 'Window',
animateTarget: 'btn',
animCollapse: true,
layout: 'fit',
width: 300,
height: 200,
plain: true
});
win.show();
}
var button = new Ext.Button({
text: 'Start',
renderTo: 'btn',
handler: btnHandler
});
}
);当点击按钮后，由按钮的handler指定的函数来响应，这里就是弹出一个窗口而已。button组件还有on这个方法来响应点击事件。例如，将button.js改成如下代码也能够获得相同效果：
Ext.onReady(
function(){var
button = new Ext.Button({ text: 'Start',renderTo:
'btn' });button.on(
'click', function(){var
win = new Ext.Window({ el:'win',title:
'A Window',animateTarget:
'btn',animCollapse:
true,layout:
'fit',width: 300,
height: 200,
plain:
true}
);win.show();
});}
);on()方法的第一个参数是发生的事件，这里是click，然后就是响应这个事件的函数。
