按钮Button组件
可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点击按钮时执行handler 内部的代码, 或用来 listeners(监听)一些事件,比如 mouseover. 范例::
1、示例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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 : '这里是表单内容',
items : [txtusername,txtpwd],
buttons : [btnsubmit,btnreset]
});
var win = new Ext.Window({
title : '窗体window',
width : 500,
height : 200,
draggable : true,
html : '这里是窗体的内容',
resizable : true,
modal : true,
closable : true,
maximizable : true,
minimizable : true,
items : form
});
win.show();
});
script>
head>
<body>
body>
html>
2、效果图:
3、常用属性及方法:
(1)属性:
text:字符串,显示在按钮上的文字。
minWidth: 整型,最小宽度
(2)方法:
handler:首发方法处理事件。
listeners:事件监听。