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

3、常用属性及方法:

(1)属性:

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

  minWidth: 整型,最小宽度

(2)方法:

  handler:首发方法处理事件。

  listeners:事件监听。

时间: 2024-10-07 23:52:03

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

ExtJs学习笔记之Window组件

Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现. 1.示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="sty

ExtJs学习笔记之ComboBox组件

ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合: 用户可以自由的在域中键入,或从下拉选择列表中选择值. 默认用户可以输入认可值,即使它没有出现在选择列表中: 设  置forceSelection为“true”,以阻止自由格式的值,并将其限制在列表中的项. (3)选择列表中的项是从任何Ext.data.Store(包括远程store)填充. st

ExtJs学习笔记之FormPanel组件

FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域. 1.示例: 在window窗体中添加一个FormPanel组件 <!DOCTYPE html> <html> <head> <meta

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递