Ext框架基础

最新推荐文章于 2016-08-21 09:17:54 发布

i0Yuri

最新推荐文章于 2016-08-21 09:17:54 发布

阅读量443

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/i0Yuri/article/details/40083519

版权

ExtJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ext的事件和类

事件模型在Ext中应用中有着重要的作用：自定义事件、浏览器事件。

自定义事件

事件模型：Ext遵循树状的继承模型，所有继承自Ext.util.Observable的控件都可以支持事件，为这些对象定义事件，配置监听器。当某个事件被触发时，会自动调用对应的监听器。

Person类

Person = function(name){
		this.name = name;
		this.addEvents("walk","eat","sleep");
	}
	Ext.extend(Person,Ext.util.Observable,{
		info:function(event){
			return this.name + 'is' + event + 'ing';
		}
	});

Person对象，有name属性。

addEvents()函数定义3个事件：walk、eat、sleep

addEvents()方法详解：定义事件

Ext.extend()让Person继承Ext.util.Observable的所有属性，此外还加上info()函数返回Person信息。

为person添加事件监听器

var person = new Person('Lingo');
	person.on('walk',function(){
		Ext.Msg.alert('event',person.name + 'zou a zou');
	});
	person.on('eat',function(breakfast,lunch,supper){
		Ext.Msg.alert('event',person.name + '要吃' + breakfast+',' +lunch+'and' +supper+'.');
	});
	person.on('sleep',function(time){
		Ext.Msg.alert('event',person.name+'from'+time.format('H')+'点开始睡觉啦。');
	});

on()是addEvents()的简写形式。

第一个参数传递事件名称，第二个参数是事件发生时的执行函数

Ext.Msg.alert()，还有Ext.Msg.confirm()等。

事件被触发时就可以看到效果了。

触发person的事件

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());
	});

fireEvent()触发事件，传入一个事件名称做参数，该事件对应的监听函数就会执行。想给监听方法传参，直接写进fireEvent()就可以。【js特性】

浏览器事件

【先略】

Ext.lib.Event

是定义在adapter中的工具类，封装了不同浏览器的事件处理函数，为上层组建提供了统一的功能接口。很少直接使用这个类，只是与事件相关的操作最后都会归于对这些底层函数的调用。

getX()、getY()、getXY()获得发生的事件在页面中的坐标位置。getXY()返回数组，如getXY()[0]代表x坐标，getXY()[1]代表y坐标。

getTarget()返回事件的目标元素，用来统一IE和其他浏览器的target和srcElement属性。

on()和un()用于将事件监听函数绑定到元素对于的事件上，以及解除。purgeElement()把元素上的所有事件都清除。

preventDefault()用于取消浏览器默认操作。如在自定义右键菜单时就要使用，防止单击鼠标右键时弹出浏览器自身的右键菜单。

stopPropagation()用于停止事件传递

stopEvent()停止事件，内部调用了preventDefault()和stopPropagation()取消了默认操作又停止了事件传递。

onAvailable()参数id、fn、scope。等到id对应的html元素可用时才执行fn这个函数，scope表示函数作用域。【sertInterval()循环检测id对应的html元素】

resolveTextNode()判断。如果参数是文本节点就返回它的上层，否则返回本身。

getRelatedTarget()返回事件相关的html元素。先获得relatedTarget属性，如不存在就通过type判断事件类型。如果type为‘mouseout’，就返回toElement属性，如果type为‘mouseover’，，就返回fromElement。

Ext.util.Observable

位于EXT组件顶端，为EXT组件提供处理事件的最基本功能。要实现一个可以处理事件的EXT组件，最直接的方法就是继承这个类。了解addListener/on、removeListener/un、addEvents、fireEvent函数的基本用法。

addEvents/on用于注册事件时，可以使用复合式参数：

Ext.get('test').on('click',fn,this,{
     single:true,
     delay:100,
     testId:4
});

click是事件名；fn是执行的函数；this表示fn执行时的作用域this；第四个即为复合参数

single:true表示函数只执行一次

delay:100函数会在事件发生后延迟100ms执行

buffer:1000也是延迟执行跟dela作用相同。

区别：buffer会创建一个Ext.util.DelayTask对象，并把fn放入其中等待执行。等待过程中再次出发事件，上次的任务就会取消，并把新的fn放入任务队列里。保证fn不会重复执行多次。如单击后弹窗，用delay时单击多次则会弹窗多次，用buffer时单击多次也只会弹窗一次

var fn=function(e,e1,args){//【为什么参数要这样设置？】
     alert(args.testId);//【testId又是什么意思】
}

可以在复合式参数中使用scope指定事件监听函数调用的作用域。不过on()中已经有了scope参数，所以这个参数的设置也就不那么重要了

还可以使用on()一次定义多个事件监听器

Ext.get('test').on({
     'click':{
          fn:fn 
     },
     'mouseover':{
          fn:fn,
          single:true,
          delay:100
     }
});

此时需要使用复合式参数中的scope才能保证函数在正确的作用于上执行。

Ext.util.Observable还有一个重要功能，可以为某个事件设置拦截器，统一管理方法的触发。

capture():

Ext.get('capture1').on('click',function(){
     Ext.util.Observable.capture(person,function(){
          alert('capture1');
          return true;
          });
});
//拦截person的fireEvent()，在它之前弹出‘capture1’，返回true，不会中止接下来的事件；
//如果返回false，则会中止事件。
Ext.get('capture2').on('click',function(){
     Ext.util.Observable.capture(person,function(){
          alert('capture2');
          return false;
          });
});

可以为一个对象设置多个captur()拦截函数，会形成一个处理链条，只有其中有一个返回false就会中止处理过程。

releaseCapture()是capture()的反向操作，一次性清除fireEvents()上的所有拦截函数，不过无法准确删除某一个拦截函数。【还不会用】

suspendEvents()暂停，即person中所有事件都会失效

resumeEvents()继续，取消上述效果

Ext.get('suspendEvents).on('click',function(){
     person.suspendEvents();
});
Ext.get('resumeEvents).on('click',function(){
     person.resumeEvents();
})

暂停、继续可以统一管理某一对象的事件。

Ext.EventManager

事件管理器，定义了一系列事件相关的处理函数。

如onDocumentReady、onWindowResize、onTextResize。其中onDocumentReady就是常见的Ext.onReady()，它会在页面文档渲染完毕但图片等还未下载时调用启动函数。

脚本放在<head>中，按理说会比<body>先执行，脚本中会找不到所需要用到的<body>元素，而Ext.onReady()可以保证它里面的内容会在html元素都加载完成后才执行，这样就避免了许多加载顺序导致的问题，也不用为脚本需要放在对于html元素后费神了。【道理同js的window.onload吧】

onWindowResize()监听浏览器窗口大小改变，不需要放在onReady里面，因为它的监听对象是window。它的监听函数只有两个参数width、height

onTextResize()监听用户修改浏览器文字大小。需要放在onReady里面

d

Ext.EventObject

对事件的封装，它将EXT自定义事件和浏览器事件结合在一起使用。还提供了丰富的辅助工具函数，帮助我们获取事件相关的信息。

定义了一系列的功能按键，处理按键事件（空格、shift、退格等）不用硬背ASCII码了

Ext.get('text').on('keypress',function(e){
     if(e.charCode == Ext.EventObject.SPACE){
          Ext.Msg.alert('info','空格');
     }
});

参数e就是一个Ext.EventObject的实例，它的charCode代表刚才按下按钮的ASCII码。

Ext.EventObject是对事件的封装，如果想得到原始的浏览器事件可以通过Ext.EventObject的browserEvent获得，但原生事件在不同浏览器上可能有很大差异。所以还是建议使用Ext.EventObject。

它的许多工具函数都与Ext.lib.Event中的函数是重名的，实际上也是通过Ext.lib.Event实现的。它对Ext.lib.Event扩展的部分是对鼠标事件和按键事件的增强，可以判断alt、ctrl、shift这些功能键是否被按下。

getWheelDelta()可以获得鼠标滚轮的delta值。可用来提升用户体验。

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,ture);
});

【mousewheel、getWidth()、setWidth()用法】