日期:2014-05-16 浏览次数:20518 次
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
});