您的位置：首页 > Web前端 > JavaScript

ExtJs学习笔记之Button组件

2018-02-08 10:52 513 查看

按钮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:事件监听。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航