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

ExtJs学习笔记之Button组件的更多相关文章

  1. ExtJs学习笔记之Window组件

    Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: ...

  2. ExtJs学习笔记之ComboBox组件

    ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...

  3. ExtJs学习笔记之FormPanel组件

    FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 ...

  4. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  5. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  6. Java学习笔记--Swing用户界面组件

    很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...

  7. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. Netty学习笔记(二)——netty组件及其用法

    1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...

  9. extjs 学习笔记（二）

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

随机推荐

  1. HDU-4828 卡特兰数+带模除法

    题意:给定2行n列的长方形,然后把1—2*n的数字填进方格内,保证每一行,每一列都是递增序列,求有几种放置方法,对1000000007取余: 思路:本来想用组合数找规律,但是找不出来,搜题解是卡特兰数 ...

  2. Swift编程规范

    文档编号: 应用开发Swift编码规范 (版本v1.0.0)       成文信息 主题词: Swift开发编码规范 作  者: 周少停 文档类别: 开发规范 审  核: 批  准: 文档性质: 初稿 ...

  3. 用python处理数学问题

    一, 计算对数: >>> import math        #导入数学模块>>> math.log(8,2)     #计算以2为底 8的对数3.0>&g ...

  4. Ubuntu下输入su - [root]后提示“su:认证失败”

    Ubuntu下,进行用户到管理员切换时,使用命令su - 时,提示输入的是root密码,而在Ubuntu下root的密码起始是随机生成的(后续可由用户自己设置),且ubuntu下只能调用root,不能 ...

  5. discuz如何设置游客可以浏览板块，但是不能查看帖子内容呢？

    后台 ,将用户组 --游客 阅读权限设置为0 QQ快捷登陆不正常 ,在首页,点击QQ快捷登陆,并不跳转到QQ认证页面,而是要输入用户名.密码.验证码等. 但是如果输入的是你想新注册的用户名等信息,却不 ...

  6. phpstudy linux (lnmp,lamp)一键安装

    phpStudy for Linux 支持Apache/Nginx/Tengine/Lighttpd, 支持php5.2/5.3/5.4/5.5切换 已经在centos-6.5,debian-7.4. ...

  7. Gulp 总结

    Gulp介绍 Gulp是一个前端开发的自动化构建工具.前端开发往往需要把LESS/SCSS文件进行编译成CSS文件,javascript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作.而G ...

  8. 将Excel生成实体类

    package com.excel.test; import java.util.List; public class createUtil { public static String append ...

  9. Bootstrap部分---环境安装及一个可视化的布局；

    一:环境安装*****顺序不可变***** <head> 如果需要可以设定,移动设备优先 <meta name="viewport" content=" ...

  10. java parseint()

    static int parseInt(String s) static int parseInt(String s, int radix) parseInt(String s)表示将 “数字” 转换 ...