ExtJs学习笔记之Button组件

按钮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、效果图:

ExtJs学习笔记之Button组件_第1张图片

3、常用属性及方法:

(1)属性:

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

  minWidth: 整型,最小宽度

(2)方法:

  handler:首发方法处理事件。

  listeners:事件监听。

转载于:https://www.cnblogs.com/yby-blogs/p/4479558.html

你可能感兴趣的:(ExtJs学习笔记之Button组件)