Sencha Touch 支持的原生事件

截至到Sencha Touch2.1为止,Sencha Touch支持的事件包括以下19种

doubletap

drag

dragend

dragstart

longpress

painted

pinch

pinchend

pinchstart

resize

rotate

rotateend

rotatestart

singletap

swipe

tap

taphold

touchmove

touchstart

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

这19种事件是Sencha Touch支持的响应用户操作的事件，作用的对象是Ext.dom.Element,可以理解成原生事件。

因为在Sencha Touch里，每个component都提供各种事件的支持，这些事件作用的对象是该component，

如Ext.Panel,支持的事件有31个。

如果希望在某个component上响应这些原生事件，可以通过Ext.get(compId)拿到该component对应的

dom element.

eg:在某个view上响应swipe,tap等事件，而该view支持的事件中并没有swipe,tap等。

1.定义view，继承container

Ext.define('TouchPad', {

    extend: 'Ext.Container',

    xtype: 'toucheventpad',
    id: 'touchpad',                 //定义id可以通过Ext.get()得到该TouchPad的dom element
    config: {
        flex: 1,
        margin: 10,
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'stretch'
        },
        items: [
        {
            html: 'Touch here!'
        }
        ]
    }
});

 

2.在另外一个view中为TouchPad添加listener

Ext.define('TouchEvents', {
    extend: 'Ext.Container',
    xtype: 'touchevents',

    requires: [
        'TouchPad',
    ],

     initialize: function() {
         this.callParent(arguments);

         // padElement为Ext.dom.Element对象

         var padElement = Ext.get('touchpad');

         //添加listener为onTouchPadEvent

         padElement.on(['touchstart', 'touchend', 'touchmove',
          'swipe', 'dragstart', 'drag', 'dragend',
          'tap', 'doubletap', 'longpress', 'pinch', 'rotate'],
          'onTouchPadEvent', this);
     },

     //事件响应函数

     onTouchPadEvent: function(e, target, options, eventController) {
         console.log(eventController.info.eventName);     

     }
});