zoukankan      html  css  js  c++  java
  • Ext 基础

    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();//在该元素身上移除所有已加入的侦听器(事件)。

    (注:转自http://biancheng.dnbcw.info/javascript/172443.html

    相关资料:

  • 相关阅读:
    es5核心技术
    es6 迭代器 和 生成器 学习笔记
    nodejs 基础学习笔记
    node 基本原理
    mac php7 连接数据库遇到的问题
    express ,koa1, koa2学习笔记
    mac mysql的安装
    webpack 给css添加前缀
    利用git将本地的代码同步到github上
    vuex 学习总结及demo
  • 原文地址:https://www.cnblogs.com/Shaina/p/2494174.html
Copyright © 2011-2022 走看看