Ext.Button组件的基本用法
<div id="btn"></div>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var _btn = new Ext.Button({
renderTo : 'btn',
id : 'ext_button',
text : 'Ext Button组件的基本用法',
minWidth : 300,
tooltip : '提示信息:Ext Button组件的基本用法',
tooltipType : 'title',//默认为 gtip,还有 title,区别在于样式不同,gtip漂亮一点
handler : function() {
alert(this.text);
//3
},
listeners : {
'click' : function() {
alert("listeners的click响应");
//1
//这个方法将会在handler之前运行
}
/*,'mouseover' : function() {
alert("mouseover");
//可以添加很多的事件
}*/
}
});
alert("直接使用_btn.text来获取按钮的显示的名称,_btn.text=" + _btn.text);
//通过Button的setText方法来改变Button的显示的名称
_btn.setText("通过Button.setText()方法来设置Button的显示的名称");
//这个非常bt
_btn.on('click',function(){
//2
alert(this.text+"使用on()方法绑定事件");
});
});
</script>
获取按钮的显示的名称直接使用对象".",如:_btn.text,但是BT的是设置text的使用setText方法的。
对于Button的事件,有三种方式。
第一种:handler,这种方式默认的事件是"click"。
第二种:listeners,设置事件监听器(暂且这么理解),可以设置多个不同种类的事件。
第三种:on()方法,这种是比较好理解和复合我个人的使用习惯的一种做法。因为我写jquery比较多。
对于click事件上面的三种方法的执行顺序是, listeners最先,再是on()方法,其次是handler。
分享到:
评论