extjs的自定义事件和浏览器事件
/**
* Extjs事件分：自定义事件和浏览器事件
* 1.自定义事件都继承自Ext.util.Observable类,以支持事件,然后为这些事件配置监听器，出发就调用对应的监听器；
*2.
EXT使用Ext.EventManager、Ext.EventObject和Ext.lib.Event对原生浏览器事件进行了封装，
* 最后展现在我们面前的就是一套统一的跨浏览器的通用事件接口。
*
* 通过一次设置来暂停某个对象中所有事件的发生，可以考虑使用suspendEvents()函数，所示：
* Ext.get('suspendEvents').on('click',function(){ person.suspendEvents(); });
* 调用suspendEvent()后，person中所有的事件都会失效只有再次调用resumeEvents()才能取消这个效果：
* Ext.get('resumeEvents').on('click',function(){ person.resumeEvents(); });
* 暂停（suspendEvents）与继续（resumeEvents）这两个事件函数可以统一管理某一对象的事件。
*
* 3.Ext.EventManager定义了一系列事件相关的处理函数，其中最常用的当属onDocumentReady、onWindowResize和onTextResize。其中：
* onDocumentReady就是我们经常看到的Ext.onReady()，它会在页面文档渲染完毕但图片等还未下载时调用启动函数。 eg: <script
* type="text/javascript"> Ext.onReady(function(){
* Ext.Msg.alert('信息',Ext.get('test')); }); </script>
* onWindowResize()的作用是监听浏览器窗口的大小改变，它会提醒我们浏览器窗口的大小在何时发生了改变，以及改变后的大小
*
* eg:Ext.EventManager.onWindowResize(function(width,height){
* alert('width:'+width+',height:'+height); });
* 注意：不必将它放在Ext.onReady()中，因为它监听的是window对象，这个对象在页面一打开时就存在了
*
* onTextResize()可以监听用户修改的文字大小 eg:
* Ext.EventManager.onTextResize(function(oldSize,newSize){
* alert('oldSize：'+oldSize+',newSize:'+newSize); });
*
* 注意： onTextResize()会在<body>标签中添加一个包含测试文字的div标签，然后监听测试文字的大小。
* 所有必须包含在onReady()中，否则出错
*
*
* Ext.EventObject是对事件的封装，它将EXT自定义事件和浏览器事件结合在一起使用。除此之外，它还提供了丰富的辅助工具函数，帮助获得事件相关的信息。
* Ext.EventObject定义了一系列的功能按键，处理按键事件时不用在去硬背ASCII码。这些功能的按键如下表所示：
* Ext.EventObject中的名称 ASCII码
* BACKSPACE 8
* PAGEDOWN 34
* TAB 9
* END 35
* RETURN 13
* HOME 36
* ENTER 13
* LEFT 37
* SHIFT 16
* UP 38
* CONTROL 17
* RIGHT 39
* ESC 27
* DOWN 40
* SPACE 32
* DELETE 46
* PAGEUP 33
* F5 116
* eg:
* Ext.get('text').on('keypress', function(e) { if (e.charCode ==
* Ext.EventObject.SPACE || e.keyCode == Ext.EventObject.SPACE) {
* Ext.Msg.alert('info', '空格'); } }); 注意：charCode代表了按下按钮的ASCII码。
*
* getWheelDelta()，可以获得鼠标滚轮的delta值
*
* eg:
* Ext.get(document.body).on('mousewheel',function(e){
* var delta = e.getWheelDelta();
* var test = Ext.get('test');
* var width = test.getWidth();
* test.setWidth(width + delta * 500 ,true);
*});
*/
Ext.EventManager.onWindowResize(function(width, height) {
alert('width:' + width + ',height:' + height);
});
Ext.onReady(function() {
// 1.自定义事件
Person = function(name) {
this.name = name;
this.addEvents("walk", "eat", "sleep");
// 初始化时，调用this.addEvents()函数
}
Ext.extend(Person, Ext.util.Observable, {
info : function(event) {
return this.name + 'is' + event + 'ing';
}
});
// 事件配置好监听器 var person = new
Person('Shinning');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + "在走路");
});
person.on('eat', function() {
Ext.Msg.alert('event', person.name + '要吃饭');
});
person.on('sleep', function() {
Ext.Msg.alert('event', person.name + '睡觉');
});
// 触发事件调用fireEvent
Ext.get('walk').on('click', function() {
person.fireEvent('walk');
});
Ext.get('eat').on('click', function() {
person.fireEvent('eat', '早餐', '午餐', '午餐 ');
});
Ext.get('sleep').on('click', function() {
person.fireEvent('sleep', new Date());
});
Ext.EventManager.onTextResize(function(oldSize, newSize) {
alert('oldSize：' + oldSize + ',newSize:' + newSize); });
Ext.get('eat').on('keypress', function(e) {
if (e.charCode == Ext.EventObject.SPACE
|| e.keyCode == Ext.EventObject.SPACE) {
Ext.Msg.alert('info', '空格');
}
});
Ext.get(document.body).on('mousewheel',function(e){
var delta = e.getWheelDelta();
var test = Ext.get('eat');
var width = test.getWidth();
test.setWidth(width + delta * 500 ,true);
});
});