熟练使用Ext 事件机制
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="../../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet">
<script src="../../ExtJS4.2/ext-all-debug.js"></script>
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script src="2.JavaScript.js"></script>
<button id="myBtn">按钮</button>
</body>
</html>
1.基础用法
1.为底层元素注册监听器
//使用Ext.EventManager 为 button 标签添加点击监听.
/**
* addListener( String/HTMLElement el, String eventName, Function handler, Object scope, Object options )
* 加入一个事件处理函数，方法on是其简写方式。 通常您将使用Ext.Element.addListener 直接调用此版本支持的元素上。
* el : String/HTMLElement
* 要分配的html元素或者其id。
* eventName : String
* 事件处理函数的名称。
* handler : Function
* 事件处理函数
* scope : Object
* (可选) 事件处理函数执行时所在的作用域。(this 引用)。默认为当前元素。
* options : Object
* (可选) 包含句柄配置属性的一个对象。
*/
Ext.onReady(function() {
Ext.EventManager.on('myBtn','click',function(e) {
console.log('被点击了...');
});
});
Ext.onReady(function() {
Ext.EventManager.on('myBtn','click',function(e) {
console.log(this);
});
});
Ext.onReady(function() {
Ext.EventManager.on('myBtn','click',function(e) {
console.log(Ext.encode(this));
},({name:'Java',age:22}));
});
2.为Ext的UI组件注册监听事件
Ext.onReady(function() {
var win = new Ext.Window({
title : '基本事件',
width : 400,
height : 300,
listeners : {
'show' : function() {
console.log('窗体显示');
},
'close' : function() {
console.log('窗体关闭');
}
}
});
win.show();
});
3.批量注册监听器
Ext.onReady(function() {
var win = new Ext.Window({
title:'基本事件',
width:400,
height:300,
});
win.on({
'show':function() {
console.log('哈哈哈哈,窗体开启....');
},
'close':function() {
console.log('啊啊啊啊,窗体关闭....');
}
});
win.show();
});
4.指定this
Ext.onReady(function() {
var win = new Ext.Window({
id:'myWin',
title:'高级事件',
width:400,
height:300,
listeners:{
'show':function() {
console.log(this.getId());
},
'close':function() {
console.log(this.getId());
}
}
});
win.show();
var winId = win.getId();
console.log('winId : '+winId);
});
/**
这里需要注意,如果需要在show事件中获得win的引用,一些代码会写成这个样子...
function getId(){
var strId = Ext.getCmp('myWin');
//其他代码....
}
从运行角度来说，没有问题，但是很多地方这么写，会显得很罗嗦....
比较好的方法是，直接引用this就可以引用win这个对象.
function(){
console.log(win.getId());
}
*/
Ext.onReady(function() {
var btn = Ext.create('Ext.Button',{
text:'按钮名称',
readerTo:Ext.getBody()
});
var win = new Ext.Window({
id:'myWin',
title:'高级事件',
width:400,
height:300,
listeners:{
'show':function() {
console.log(this.text);
},
scope:btn //作用域配置成其他对象
}
});
win.show();
});
5.单次运行的监听事件
Ext.onReady(function() {
var win = new Ext.Window({
id:'myWin',
title:'高级事件',
width:400,
height:300,
listeners:{
'hide':function() {
console.log('隐藏');
},
scope:win,
single:true
}
});
win.show();
Ext.create('Ext.Button',{
text:'显示',
renderTo:Ext.getBody(),
handler:function() {
win.show();
console.log('哈哈哈');
}
});
Ext.create('Ext.Button',{
text:'隐藏',
renderTo:Ext.getBody(),
handler:function() {
win.hide();
}
});
});
6.挂起和恢复
/**
suspendEvents() 和 resumeEvents()
这两个工具函数很有用,比如在弹出一个模态的Window时,
被遮罩在下面的那些组件不会再接收鼠标和键盘的事件.
*/
Ext.onReady(function() {
var btn1 = new Ext.Button({
text:'测试用的按钮',
renderTo:Ext.getBody(),
listeners:{
'mouseover':function() {
console.log('鼠标滑过...');
}
}
});
Ext.create('Ext.Button',{
text:'挂起',
renderTo:Ext.getBody(),
handler:function() {
btn1.suspendEvents();
}
});
Ext.create('Ext.Button',{
text:'恢复',
renderTo:Ext.getBody(),
handler:function() {
btn1.resumeEvents();
}
});
});
7.事件转发
Ext.onReady(function() {
var btn = new Ext.Button({
text:'触发事件',
renderTo:Ext.getBody(),
handler:function() {
btn.fireEvent('myBtn');
}
});
var win = new Ext.Window({
id:'myWin',
title:'转发',
width:400,
height:300,
listeners:{
'myBtn':function() {
alert('Window 收到事件');
}
}
});
win.show();
win.relayEvents(btn,['myBtn']);
});
8.删除监听函数
Ext.onReady(function() {
var btn = new Ext.Button({
text:'删除事件监听事件',
renderTo:Ext.getBody(),
handler:function() {
win.un('close',closeHandler);
}
});
var closeHandler = function() {
console.log(this.getId());
};
var win = new Ext.Window({
id:'myWin',
title:'高级事件',
width:400,
height:300,
listeners:{
'close':closeHandler
}
});
win.show();
});
9.自定义事件
Ext.onReady(function() {
var win = new Ext.Window({
title:'基本事件',
width:400,
height:300,
listeners:{
'show':function() {
this.fireEvent('myEvt');
}
}
});
win.addEvents('myEvt');
win.on('myEvt',function() {
console.log('我自己定义的事件');
})
win.show();
});
