ExtJs学习笔记之Button组件

按钮Button组件

  可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned iconsdropdown menustooltips 和 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、效果图:

ExtJs学习笔记之Button组件

3、常用属性及方法:

(1)属性:

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

  minWidth: 整型,最小宽度

(2)方法:

  handler:首发方法处理事件。

  listeners:事件监听。

你可能感兴趣的:(button)