使用Sencha Touch 2中的HTML缩放面板

时间:2012-10-24 07:14:02

标签: sencha-touch-2

我正在尝试在其中放大带有HTML的Panel。

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+')');应该设置其他内容,但我已尝试过每个父元素,但仍然失败。

我知道有一些可用的例子,但大多数都处理图像,而不是面板与HTML。

我做错了什么?

0 个答案:

没有答案