ExtJs基础【二】

动画

Ext Core里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法.

puff//渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility = ‘hidden’）， 但是块元素仍然会在 document对象中占据空间。如果需要将元素从 DOM 树删除，则使用‘remove’配置选项。
// 默认
el.puff();
// 常见的配置选项及默认值
el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});

 

slideIn/slideOut//将元素滑入到视图中。
fadeIn/fadeOut//将元素从透明渐变为不透明。
switchOff//类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。
highlight//高亮
pause//在任何后续的特效开始之前一次暂停。
scale//以动画展示元素从开始的高度/宽度转换到结束的高度/宽度
ghost//将元素从视图滑出并伴随着渐隐。      //等等…

 

 

事件

HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码：

 

注册一个事件处理函数使用：
Ext.get('myElement').on('click', myHandler, myScope); myElement是要注册的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同，这里不需要on），myHandler是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的window。

撤销一个事件处理函数： Ext.get(‘myElement’).un(‘click’, myHandler, myScope) 参数的意义同上。
Ext.Element的on方法是addListener方法的简写.

如果你想在一个元素上添加多个事件处理器可以这样一次搞定。

var el= Ext.get(‘myElement’);
el.on({click’ : {fn: this.onMyClick,scope: this,delay: 100//延迟0.1秒执行,---高级事件功能}, 'mouseover' : {fn: this.onMyMouseOver,scope: this}});

 

 

 

高级事件

事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，Ext Core在此方面提供了一系列的配置选项。

 

委托delegation减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基本要义是：

并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。

 

<ul id='actions'>
<li id='btn-edit'></li>
<li id='btn-delete'></li>
<li id='btn-cancel'></li>
</ul>

我们想实现,点击不同的li,产生不同的效果.为此我们可能会这么做.

Ext.get(‘btn-edit’).on(‘click, function(e,t) {// 执行事件具体过程A});
Ext. get(‘btn-delete’).on(‘click, function(e,t) {// 执行事件具体过程B});
Ext. get(‘btn-cancel’).on(‘click, function(e,t) {// 执行事件具体过程C});

 

使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：
Ext.get(‘actions’).on(‘click, function(e,t) {//在div上登记一个事件
switch(t.id) {
case ''btn-edit':
// 处理特定元素的事件具体过程A
break;
case 'btn-delete':
// 处理特定元素的事件具体过程B
break;
case 'btn-cancel':
// 处理特定元素的事件具体过程C
break;
}
});

基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。

是否一次性触发single
在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
single: true // 触发一次后不会再执行事件了
});

 

延时delay
你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后
处理函数延时执行的时间。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
delay: 1000// 延迟事件，响应事件后开始计时（这里一秒）
});

 

缓冲buffer
将上面代码的delay换成buffer//在缓冲时间内触发事件 无效.

移除事件句柄removeAllListeners
el.removeAllListeners();//在该元素身上移除所有已加入的侦听器(事件)。