Пинч-масштабирование панелей с HTML в Sencha Touch 2

Question

Я пытаюсь увеличить панель с HTML внутри.

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+')');
                }
            }
        }
    }
});

Это вроде работает, но не работает как задумано. Он ломает скроллер и не работает постоянно.

я думаю Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')'); должен быть установлен на что-то другое, но я попробовал каждый родительский элемент, по-прежнему не удалось.

Я понимаю, что есть несколько примеров, но большинство из них имеют дело с изображениями, а не Panel с HTML.

Что я делаю неправильно?