按钮Button组件
可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点击按钮时执行handler 内部的代码， 或用来 listeners（监听）一些事件，比如 mouseover. 范例：:
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script> <script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { //初始化标签中的Ext:Qtip属性 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //提交按钮点击事件 var btnsubmitclick = function(){ Ext.Msg.alert('提示','你点击了提交按钮'); } //重置按钮点击事件 var btnresetclick = function(){ Ext.Msg.alert('提示','你点击了重置按钮'); } //重置按钮鼠标悬停处理方法 var btnresetmouseover = function(){ Ext.Msg.alert('提示','你的鼠标悬停在重置按钮上'); } //提交按钮 var btnsubmit = new Ext.Button({ text : '提交', handler : btnsubmitclick }); //重置按钮 var btnreset = new Ext.Button({ text : '重置', listeners : { 'click' : btnresetclick, 'mouseover' : btnresetmouseover } }); //用户名input var txtusername = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'username', fieldLabel : '用户名称', blankText : '请输入用户名', maxLengthText : '用户名输入不能超过20个字符' }); //密码input var txtpwd = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'password', inputType : 'password', fieldLabel : '密码', blankText : '请输入密码', maxLengthText : '密码输入不能超过20个字符' }); var form = new Ext.form.FormPanel({ frame : true, title : '表单标题', style : 'margin:10px', // draggable : true, //可拖拽 html : '<div style ="padding:10px">这里是表单内容</div>', items : [txtusername,txtpwd], buttons : [btnsubmit,btnreset] }); var win = new Ext.Window({ title : '窗体window', width : 500, height : 200, draggable : true, html : '<div>这里是窗体的内容</div>', resizable : true, modal : true, closable : true, maximizable : true, minimizable : true, items : form }); win.show(); }); </script> </head> <body> <!-- 说明： (1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。 (2)handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。 (3)listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，鼠标悬停时执行方法btnresetmouseover。 (4)handler与listeners的区别： handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。handler是一个特殊的listener。 listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件"click"，与"mouseover"事件，并且会顺序执行。 --> </body> </html>
2、效果图：
3、常用属性及方法：
（1）属性：
text:字符串，显示在按钮上的文字。
minWidth: 整型，最小宽度
（2）方法：
handler:首发方法处理事件。
listeners:事件监听。