Pinch-to-Zoom em painéis com HTML no Sencha Touch 2
Eu estou tentando ampliar um painel com HTML dentro dele.
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+')');
}
}
}
}
});
Isso funciona, mas não funciona como planejado. Ele quebra o scroller e não funciona o tempo todo.
eu estou pensandoExt.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');
deve ser definido em outra coisa, mas eu tentei todos os elementos pai, ainda falhou.
Eu entendo que existem alguns exemplos disponíveis, mas a maioria deles trata de imagens, não de Painel com HTML.
O que estou fazendo de errado?