Create template/object, and report interactions on panel.

senchalearn · Nov 8, 2010 · f99e564 · f99e564
1 parent 031894a
commit f99e564
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,5 +11,22 @@
 
 </head>
 <body>
+<textarea id="report-interactions" class="x-hidden-display">
+  <dl>
+    <dt>tap</dt> <dd>{tap}</dd>
+    <dt>singletap</dt> <dd>{singletap}</dd>
+    <dt>doubletap</dt> <dd>{doubletap}</dd>
+    <dt>taphold</dt> <dd>{taphold}</dd>
+    <dt>tapcancel</dt> <dd>{tapcancel}</dd>
+    <dt>touchstart</dt> <dd>{touchstart}</dd>
+    <dt>touchdown</dt> <dd>{touchdown}</dd>
+    <dt>touchmove</dt> <dd>{touchmove}</dd>
+    <dt>touchend</dt> <dd>{touchend}</dd>
+    <dt>scrollstart</dt> <dd>{scrollstart}</dd>
+    <dt>scroll</dt> <dd>{scroll}</dd>
+    <dt>scrollend</dt> <dd>{scrollend}</dd>
+    <dt>swipe</dt> <dd>{swipe}</dd>
+  </dl>
+</textarea>
 </body>
 </html>
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
@@ -1,13 +1,16 @@
-// http://www.sencha.com/forum/showthread.php?105114-COMPLETE-198-Inline-method-for-attaching-dom-events&p=509711#post509711
-//
-
 Ext.setup({
   onReady: function() {
     var eventPanel, viewport;
 
-    eventPanel = new InteractivePanel();
+    eventPanel = new InteractivePanel({
+      tpl: Ext.XTemplate.from('report-interactions'),
+      styleHtmlContent: true
+    });
     eventPanel.addListener({
-      interact: function() {console.log('interacted with panel');}
+      interact: function(type,event) {
+        this.eventStats[type] += 1;
+        this.update(this.eventStats);
+      }
     });
 
     viewport = new Ext.Panel({

diff --git a/public/javascripts/interactive-panel.js b/public/javascripts/interactive-panel.js
@@ -1,5 +1,7 @@
 var InteractivePanel = Ext.extend( Ext.Panel, {
 
+  eventStats: {},
+
   initComponent : function() {
     InteractivePanel.superclass.initComponent.call(this);
     this.addEvents('interact');
@@ -23,8 +25,31 @@ var InteractivePanel = Ext.extend( Ext.Panel, {
       swipe: this.handleEvent,
       scope: this
     });
+    this.resetStats();
   },
 
-  handleEvent: function(e) { this.fireEvent('interact', e.type, e); }
+  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,
+      scrollstart: 0,
+      scroll: 0,
+      scrollend: 0,
+      singletap: 0,
+      taphold: 0,
+      tapcancel: 0,
+      swipe: 0,
+      pinch: 0,
+      pinchstart: 0,
+      pinchend: 0
+    }
+    this.update(this.eventStats);
+  }
 
 });