Ext.util.TapRepeater的用法

如果是Sencha Touch 支持的component，会有支持的事件，如list每一项目会有itemtap等事件，

formfield的text field的clear icon会有clearincontap事件。

但如果是对Sencha Touch的comonent进行扩展，如和让其支持tap事件呢？

Ext.util.TapRepeater提供了解决方法，它属于包装类，用它可以为任何element添加tap事件。

原理是将事件源对象(Ext.dom.Element对象)指定给TapRepeater的el属性，然后为TapRepeater的tap事件添加handler.

也就是通过TapRepeater为element对象添加上了tap事件。

其实在"Sencha Touch支持的原生事件"中提到过可以直接为element对象添加tap,swipe等事件的，但通过TapRepeater有一下几个好处：

1）可以指定从按下到tap事件触发的时间间隔

2）可以指定按下的css样式

从源代码可以看到有如下config(API文档列出的并不全，所以以源代码为主):

config:{        
        el:null,     //触发事件的element对象   
        accelerate:true,        
        interval:10,        //延长tap事件触发
        delay:250,          //同上二者是或的关系
        preventDefault:true,        
        stopDefault:false,        
        timer:0,        //used for clearTimeout()
        pressCls:null  //按下的样式
}

从Ext.field.Spinner类可以得到如何使用的灵感，该类就是扩展了Ext.field.Number类，在其基础上增加了 加/减 按钮。

----------------------------------------------------------------

  //el为Ext.dom.Element对象，fn为事件处理函数 
  createRepeater:function(el, fn){
        var me =this,
        repeater =Ext.create('Ext.util.TapRepeater',{
                el: el,
                accelerate: me.getAccelerateOnTapHold()});

        repeater.on({
            tap: fn,
            touchstart:'onTouchStart',
            touchend:'onTouchEnd',
            scope: me
        });
       return repeater;
  }

----------------------------------------------------------------

调用

----------------------------------------------------------------

updateComponent:function(newComponent){
    this.callParent(arguments);
    var innerElement =this.innerElement,
    cls =this.getCls();
    if(newComponent){
        this.spinDownButton =Ext.Element.create({
                cls : cls +'-button '+ cls +'-button-down',
                html:'-'});
        this.spinUpButton =Ext.Element.create({
                cls : cls +'-button '+ cls +'-button-up',
                html:'+'});
        //this.spinDownButton为Ext.dom.Element对象，this.onSpinDown为事件处理函数 

        this.downRepeater =this.createRepeater(this.spinDownButton,this.onSpinDown);
        this.upRepeater =this.createRepeater(this.spinUpButton,this.onSpinUp);}},

----------------------------------------------------------------