//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