日期:2014-05-16 浏览次数:20435 次
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的事件方法"); }); });
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 });