title: Pinch-to-Zoom on Panels with HTML in Sencha Touch 2
body: <p>I am trying to zoom on a Panel with HTML inside of it.</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('Sencha.view.Detail_content', {
      extend: 'Ext.Panel',
      xtype: 'detailcontenttpl',
      config: {
          layout: {  type: "fit" },
          scrollable: true,
          styleHtmlContent: true,
          id: 'detail_content_wrap',
          tpl : [
              "&lt;p class='detail_contentDate'&gt;{date}&lt;/p&gt;",
              "&lt;div class='messageWrap'&gt;{message}&lt;/div&gt;"
          ],
          listeners: {
              pinchstart: {
                  element: 'innerElement',
                  fn: function(e, t) {
                      this.startScale = e.scale;
                  }
              },
              pinch: {
                  element: 'innerElement',
                  fn: function(e, t) {
                      e.preventDefault();
                      this.scale = e.scale * this.startScale;
                      var p = t.parentNode;
                      Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>It kind of works, but doesn't work as intended. It breaks the scroller, and it doesn't work all the time.</p>
  
  <p>I am thinking <code>Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');</code> should be set on something else, but I have tried every parent element, still failed.</p>
  
  <p>I understand there are some examples available, but most of them deal with images, not Panel with HTML.</p>
  
  <p>What am I doing wrong?</p>