Listener

//app
Ext.setup({
  onReady: function() {
    var eventPanel, resetButton, viewport;

    eventPanel = new InteractivePanel({
      tpl: Ext.XTemplate.from('report-interactions'),
      styleHtmlContent: true
    });
    eventPanel.addListener({
      interact: function(type,event) {
        this.eventStats[type] += 1;
        this.update(this.eventStats);
      }
    });

    resetButton = new Ext.Button({
      text: 'reset',
      dock: 'bottom',
      handler: function() { eventPanel.resetStats() }
    });

    viewport = new Ext.Panel({
      fullscreen: true,
      layout: "fit",
      items: [eventPanel],
      dockedItems: [resetButton]
    });

  }
});

//listener

var InteractivePanel = Ext.extend( Ext.Panel, {

  eventStats: {},

  initComponent : function() {
    InteractivePanel.superclass.initComponent.call(this);
    this.addEvents('interact');
    this.addListener({
      el: {
        touchstart: this.handleEvent,
        touchend: this.handleEvent,
        touchmove: this.handleEvent,
        touchdown: this.handleEvent,
        dragstart: this.handleEvent,
        drag: this.handleEvent,
        dragend: this.handleEvent,
        singletap: this.handleEvent,
        tap: this.handleEvent,
        doubletap: this.handleEvent,
        taphold: this.handleEvent,
        tapcancel: this.handleEvent,
        swipe: this.handleEvent,
        scope: this
      }
    });
    this.resetStats();
  },

  handleEvent: function(e) { this.fireEvent('interact', e.type, e); },

  resetStats: function () {
    this.eventStats = {
      tap: 0,
      doubletap: 0,
      touchstart: 0,
      touchend: 0,
      touchmove: 0,
      touchdown: 0,
      dragstart: 0,
      drag: 0,
      dragend: 0,
      singletap: 0,
      taphold: 0,
      tapcancel: 0,
      swipe: 0,
      pinch: 0,
      pinchstart: 0,
      pinchend: 0
    }
    this.update(this.eventStats);
  }

});

看的 老外的 demo

你可能感兴趣的:(listener)