`
zpball
  • 浏览: 919335 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS Button的事件和方法定义

阅读更多
ExtJS Button的事件和方法定义:
Ext.onReady(function(){
                //构造函数的参数传入一个字面量- renderTo, text
                //minWidth最小宽度,无论字有多大都是100像素宽度
                //handler:指定一个函数句柄,在默认事件触发时的函数调用
                //此时的默认事件为click
                //这是事件定义的第一种方法
                var _button = new Ext.Button({
                    //Ext.getBody().dom == document.body;
                    renderTo: Ext.getBody(),
                    text: "确定",
                    minWidth: 100,
                    handler: function(){
                        alert("欢迎学习ExtJS");
                    }
                });
                //text是Ext.Button的只读属性
                alert(_button.text);
                //setText是Ext.Button的设置Text方法
                _button.setText("取消");
               
                //listeners是在对象在被初始化前,就将一系列事件定义的手段
                //这是事件定义的第二种方法(推荐程度5颗星)
                var button2 = new Ext.Button({
                        renderTo: Ext.getBody(),
                        text: "Listeners Test",
                        minWidth:100,
                        listeners:{
                               "click":function(){
                                      alert("Listeners Test");
                               }
                        }
                });
                                               
               //这是事件定义的第三种方法
               var _button3 = new Ext.Button({
           renderTo: Ext.getBody(),
           text: "On方法的事件定义",
                        minWidth:100
                });
               _button3.on("click", function(){
                        alert("on的事件方法");
               });
            });



extjs  button  用法:
Ext.QuickTips.init();
        var buttonName = new Ext.Button({
  id:"buttonName",
               text:"Button组件基本用法",
               tooltip:"提示信息:Button组件基本用法",
   //提示信息,如果需要显示提示信息,需要使用Ext.QuickTips.init();
             
              tooltipType:"title", //定义显示提示信息的类型,有qtip和title两种方式,默认是qtip
             
              type:"button", //按钮类型:可以是submit, reset or button  默认是 button
             
              autoShow:true,  //默认false,自动显示
            
               hidden:false,  //默认false,是否隐藏
            
               hideMode:"offsets", //隐藏方式,默认display,可以取值:display,offsets,visibility
             
              cls:"cssButton", //样式定义,默认""
            
               disabled:false, //是否可用,默认false
            
               disabledClass:"",  //默认x-item-disabled
            
               enableToggle:true, //默认false
            
               pressed:false, //设置按钮是否已经被按下,默认是false
            
               html:"Ext",//默认""
            
               handleMouseEvents:true, //默认true,如果为false,那么mouseout mouseover就不能被触发
             
              //x:number,y:number,在容器中的x,y坐标  
             
               handler:function(){Ext.Msg.alert('提示消息框','测试Button组件:handler事件!');},//添加事件
            
               listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行
                  "click":function(){
                       Ext.Msg.alert('提示消息框','测试Button组件:listeners事件!');
                       Ext.getCmp("buttonName").hide();//隐藏按钮
                  }
              },
            
               cls:"x-btn-text-icon",//添加图标前需要设置该属性
             
              icon:"house.gif", //图标的地址
            
               //plugins : Object/Array 扩展插件时使用
            
               repeat:false,  //默认false ,如果为true,需要设置mouseover事件
            
               renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
             
        });

配置:
1. id:"buttonName",
2. text:"Button组件基本用法",
3. tooltip:"提示信息:Button组件基本用法", //提示信息,如果需要显示提示信息,需要使用Ext.QuickTips.init();
4. ooltipType:"title", //定义显示提示信息的类型,有qtip和title两种方式,默认是qtip
5. ype:"button", //按钮类型:可以是submit, reset or button  默认是 button
6. autoShow:true,  //默认false,自动显示
7. hidden:false,  //默认false,是否隐藏
8. hideMode:"offsets", //隐藏方式,默认display,可以取值:display,offsets,visibility
9. cls:"cssButton", //样式定义,默认""
10. disabled:false, //是否可用,默认false
11. disabledClass:"",  //默认x-item-disabled
12. enableToggle:true, //默认false
13. pressed:false, //设置按钮是否已经被按下,默认是false
14. html:"Ext",//默认""
15. handleMouseEvents:true, //默认true,如果为false,那么mouseout mouseover就不能被触发
16. x:number,y:number,在容器中的x,y坐标 
17. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件:handler事件!');},//添加事件
18. listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行
         "click":function(){
             Ext.Msg.alert('提示消息框','测试Button组件:listeners事件!');
             Ext.getCmp("buttonName").hide();//隐藏按钮
           }
   },
19. cls:"x-btn-text-icon",//添加图标前需要设置该属性
20. icon:"house.gif", //图标的地址
21. plugins : Object/Array 扩展插件时使用
22. repeat:false,  //默认false ,如果为true,需要设置mouseover事件
23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
常用方法:
1. enable();激活按钮
2. disable();禁用按钮
3. destroy();消灭按钮
4. focus();按钮获取焦点
5. getText();获取按钮上的文本
6. hide();隐藏按钮
7. show();显示按钮
8. setText( String text );设置按钮上的文本
9. setVisible( Boolean visible );设置按钮是否隐藏
10. buttonName.purgeListeners();
//使用该方法,意思是清除所有的监听事件,所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
11. buttonName.setHandler(fn);      
        //也可以通过这种方式设置handler事件:
        buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件:setHandler事件!');});
12. buttonName.on(eventName,fn);
       //下面的事件可以自己测试下
        buttonName.on("click",function(){
            Ext.Msg.alert('提示消息框','测试Button组件:click事件!');
        });
         buttonName.on("mouseover",function(){
            Ext.Msg.alert('提示消息框','测试Button组件:mouseover事件!');
        });
        buttonName.on("mouseout",function(){
            Ext.Msg.alert('提示消息框','测试Button组件:mouseout事件!');
        });
            
mouseout : ( Button this, Event e ) ;
mouseover : ( Button this, Event e );
beforedestroy : ( Ext.Component this ) ;
beforehide : ( Ext.Component this ) ;
beforerender : ( Ext.Component this )
beforeshow : ( Ext.Component this )
click : ( Button this, EventObject e )
destroy : ( Ext.Component this )
disable : ( Ext.Component this )
enable : ( Ext.Component this )
hide : ( Ext.Component this )
show : ( Ext.Component this )
render : ( Ext.Component this )
<!--EndFragment-->
分享到:
评论

相关推荐

    ExtJS 4 button按钮

    ExtJS 4的Button组件还提供了一系列方法来控制和操作按钮的状态和行为,包括但不限于: - **enable()**:启用按钮,使其可被点击。 - **disable()**:禁用按钮,防止用户进行任何操作。 - **destroy()**:销毁按钮...

    EXTJS button交换

    EXTJS 是一个强大的JavaScript...理解这些组件的工作原理和事件处理机制是掌握EXTJS的关键,而"EXTJS button交换"的实践就是这一学习过程的一部分。通过不断实践和学习,你可以更加熟练地利用EXTJS构建复杂的应用场景。

    Extjs事件和模板

    事件分为组件事件、自定义事件和应用事件。组件事件是EXTJS内置的,如点击、双击、拖放等,可以直接绑定到组件上;自定义事件则允许开发者根据需求创建自己的事件类型;应用事件则是全局级别的,适用于跨组件或模块...

    ExtJS 事件处理 动态载入

    在深入探讨事件处理和动态载入这两个主题之前,我们先简单了解一下ExtJS的基础。 ExtJS 提供了一个完整的框架,包括丰富的UI组件、数据绑定机制、布局管理以及强大的事件模型。这使得开发者能够创建功能丰富的Web...

    学习ExtJS(二) Button常用方法

    总结,ExtJS Button提供了丰富的功能,不仅可以通过属性控制外观,还可以通过构造参数和方法实现复杂的交互逻辑。理解并熟练掌握这些知识点对于开发ExtJS应用程序至关重要,特别是在构建具有用户友好交互的Web应用时...

    ExtJS 事件笔记

    - **内联式登记**:在HTML元素中直接定义事件处理函数,如`onClick="popUp()"`。这种方式简洁明了,但不利于代码复用。 - **传统式登记**:通过JavaScript获取元素并设置其事件处理函数,例如`button.onclick = ...

    EXTJS修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    extjs 的权限问题 要求控制的对象是 菜单,按钮,URL

    总结来说,Extjs中的权限控制涉及到客户端和服务器端的紧密合作。客户端通过重载Connection类来拦截所有数据交互,并在需要的时候处理权限验证失败的逻辑。服务器端则需要为每个请求提供定制化的JSON数据,这些数据...

    EXTJS讲解个人项目经历

    - **底层API(core)**:这是EXTJS的基础,包含DOM操作、事件处理、查询器等功能,如`DomHelper.js`和`Element.js`。 - **控件(widgets)**:EXTJS提供了大量的可视化组件,如面板、表格、树、窗口等,它们都基于...

    extjs自定义控件

    - **监听器**:自定义控件可以添加自己的事件,通过`listeners`配置项或`addEvents`方法定义事件,然后使用`on`、`un`或`mon`方法添加事件监听器。 - **事件代理**:利用`delegate`配置项,可以在控件内部对特定...

    Extjs的loading效果

    在本文中,我们将深入探讨如何利用ExtJS和CSS来实现加载时的缓冲效果。 一、ExtJS的Loading效果 ExtJS的loading效果是指当数据正在后台加载或页面正在处理时,显示的一种视觉提示,告知用户系统正在进行工作。这...

    Extjs4使用要点个人整理

    2. **按钮(Button)的用法**:`EXTjs button用法.doc`将详细介绍如何创建和使用ExtJS 4的按钮组件,包括设置按钮文本、图标、事件监听器以及使用不同类型的按钮,如工具栏按钮、菜单按钮等。 3. **表单(Form)...

    extjs2.1库文件

    4. **事件处理**:ExtJS 2.1的事件驱动模型使得用户交互变得简单,每个组件都有一系列预定义的事件,通过监听和响应这些事件,可以实现组件间的交互和业务逻辑。 5. **Ajax和JsonP**:ExtJS 2.1支持Ajax和JsonP通信...

    extjs 2000个 icon 图标素材

    ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在ExtJS中,图标(icon)是用于增强UI视觉效果和用户体验的重要元素。这些图标通常用在按钮、菜单项、工具...

    ExtJs实用图标大全

    在ExtJs中,图标是提升用户界面美观度和交互性的重要元素,尤其对于按钮、菜单项、工具栏等组件,图标能够直观地表示功能,增强用户的认知。 "ExtJs实用图标大全"包含了近千个专为ExtJs设计的小图标,尺寸为16x16...

    EXTJS2 API

    每个组件都有自己的配置项和方法,开发者可以通过组合这些组件创建复杂的用户界面。 2. **数据绑定(Data Binding)**:EXTJS2实现了双向数据绑定,允许视图层和模型层的数据自动同步,减少了手动更新UI的工作。...

    ExtJS2.0及API文档和实用开发指南

    API(Application Programming Interface)文档详细列出了框架提供的各种类、方法、属性和事件,帮助开发者了解如何使用这些功能来创建自定义组件、管理用户交互、处理数据和响应系统事件。通过查阅API,开发者可以...

    Extjs单独定义各组件的实例代码

    在提供的实例中,我们看到如何单独定义并使用几种EXTJS组件,包括ComboBox(下拉框)、TextField(文本框)、Button以及Toolbar。下面我们将详细解释这些组件的定义和用法。 1. ComboBox(下拉框): - `...

    ExtJs2.0学习系列

    ExtJS 2.0的组件系统是其核心部分,包括各种UI元素,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等。这些组件可以独立使用,也可以组合构建复杂的用户界面。学习ExtJS 2.0时,理解每个组件的功能...

Global site tag (gtag.js) - Google Analytics