Estoy tratando de hacer zoom en un Panel con HTML dentro de él.

Ext.define('Sencha.view.Detail_content', {
    extend: 'Ext.Panel',
    xtype: 'detailcontenttpl',
    config: {
        layout: {  type: "fit" },
        scrollable: true,
        styleHtmlContent: true,
        id: 'detail_content_wrap',
        tpl : [
            "<p class='detail_contentDate'>{date}</p>",
            "<div class='messageWrap'>{message}</div>"
        ],
        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+')');
                }
            }
        }
    }
});

Funciona, pero no funciona como se esperaba. Rompe la rueda de desplazamiento, y no funciona todo el tiempo.

estoy pensandoExt.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')'); Debería establecerse en otra cosa, pero he intentado cada elemento padre, aún fallado.

Entiendo que hay algunos ejemplos disponibles, pero la mayoría de ellos trata con imágenes, no con el Panel con HTML.

¿Qué estoy haciendo mal?