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
                }
            });
            //用户名input
            var txtusername = new Ext.form.TextField({
                width: 140,
                allowBlank: false,
                maxLength: 20,
                name: 'username',
                fieldLabel: '用户名称',
                blankText: '请输入用户名',
                maxLengthText: '用户名不能超过20个字符'
            });
            //密码input
            var 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(); //重置