ExtJs 入门教程六[按钮：Button]

本文主要是介绍ExtJs 入门教程六[按钮：Button]，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、效果

二、代码

var btn_search = new Ext.Button({text:'  查  询  ',formBind:true,//与表单参数monitorValid:true连用,当验证通过时按钮才能使用iconCls:'Btn_search_css',handler:function(){//handler相当于onClick，是Ext的配置项fwzAddPop.fwzForm.getForm().submit({waitMsg : "正在提交数据...",success:function(){Ext.Msg.alert("系统提示","添加成功");fwzStore.reload();},failure:function(f,json){Ext.Msg.alert("系统提示","添加失败,"+json.result.error);}});//也可以使用下面这种提交方式submit: function(){this.getEl().dom.action = 'GetForm.aspx',this.getEl().dom.method='POST',this.getEl().dom.submit();},}
},{Ext.Msg.confirm('系统提示','确定要修改吗？',function(btn){});
},{});

二、代码

<script type="text/javascript">Ext.onReady(function () {//初始化标签中的Ext:Qtip属性。Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//提交按钮处理方法var btnsubmitclick = function () {Ext.MessageBox.alert('提示', '你点了确定按钮!');}//重置按钮"点击时"处理方法var btnresetclick = function () {Ext.MessageBox.alert('提示', '你点了重置按钮!');}//重置按钮"鼠标悬停"处理方法var btnresetmouseover = function () {Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');}//提交按钮var btnsubmit = new Ext.Button({text: '提交',handler: btnsubmitclick});//重置按钮var btnreset = new Ext.Button({text: '重置',listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}});//用户名inputvar txtusername = new Ext.form.TextField({width: 140,allowBlank: false,maxLength: 20,name: 'username',fieldLabel: '用户名称',blankText: '请输入用户名',maxLengthText: '用户名不能超过20个字符'});//密码inputvar txtpassword = new Ext.form.TextField({width: 140,allowBlank: false,maxLength: 20,inputType: 'password',name: 'password',fieldLabel: '密码',blankText: '请输入密码',maxLengthText: '密码不能超过20个字符'});//表单var form = new Ext.form.FormPanel({frame: true,title: '表单标题',style: 'margin:10px',html: '<div style="padding:10px">这里表单内容</div>',items: [txtusername, txtpassword],buttons: [btnsubmit, btnreset]});//窗体var win = new Ext.Window({title: '窗口',width: 476,height: 374,html: '<div>这里是窗体内容</div>',resizable: true,modal: true,closable: true,maximizable: true,minimizable: true,buttonAlign: 'center',items: form});win.show();});</script>

三、说明

（1）handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。

（2）listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，

鼠标悬停时执行方法btnresetmouseover。

（3） handler与listeners的区别：

handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。

handler是一个特殊的listener。

listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件"click"，与"mouseover" 事件，并且会顺序执行。
四、 button组件常用的：属性、方法及事件

1、属性

text:字符串，显示在按钮上的文字。

minWidth: 整型，最小宽度。

2、事件

handler:首发方法处理事件。

listeners:事件监听。

五、补充

（1）给Button添加id属性：

var form=new Ext.form.FormPanel({frame:true,id:"frmTest",title:"测试表单",style:"margin:10px",items:[textuser,textpass],buttons:[btnSubmit,btnReset]
});

通过id属性获得Button对象：

补充：getDom与getCmp的区别。getDom方法－获得DOM节点getCmp方法－获得Ext组件

资料：Ext中的get、getDom、getCmp、getBody、getDoc的区别 

var frmTest = Ext.getCmp("frmTest").getForm(); //获取到Ext组件后再调用个获取表单的方法

frmTest.reset(); //重置

这篇关于ExtJs 入门教程六[按钮：Button]的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---