ExtJs学习笔记之Button组件

浏览数：53 / 时间：2015年06月09日

按钮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>