日期:2014-05-16  浏览次数:20435 次

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:fals