Question

我正在使用一个很棒的html2canvas功能，但我有一个noob问题。如何将从document.body捕获的字段更改为特定面板？总之，我需要将document.body更改为我想要捕获的面板，我只是不知道获取我想要的面板的代码。

我尝试过Ext.ComponentQuery.query（'＃testPanel'）但没有成功。

testButtonClicked: function (btn) {

    html2canvas(document.body, {
        onrendered: function (canvas) {
            new Ext.Window({
                title: 'Screenshot',
                //width: 500,
                height: 800,
                resizable: true,
                autoScroll: true,
                preventBodyReset: true,
                html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
            }).show();
        }
    });

Answer 1

你想要getEl（）。dom。这是一个独立的例子（使用Ext 4.2.x测试）：

Ext.onReady(function () {

    Ext.define('Panel', {
        extend: 'Ext.panel.Panel',

        frame: true,
        title: 'Test Panel',
        width: 300,
        height: 300,

        onClick: function () {
            html2canvas(this.getEl().dom, {
                onrendered: function (canvas) {
                    new Ext.Window({
                        title: 'Screenshot',
                        width: 300,
                        height: 300,
                        html: '<img src="' + canvas.toDataURL("image/png") + '"/>'
                    }).show();
                }
            });
        },


        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'datepicker'
                    },
                    {
                        xtype: 'button',
                        text: 'CAPTURE THIS PANEL',
                        handler: this.onClick,
                        scope: this
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('Panel', {
        renderTo: Ext.getBody()
    });
});

Answer 2

html2canvas()似乎需要DOM元素。 Ext.ComponentQuery.query()返回一个匹配元素的数组，因此如果你精确地使用你提供的代码，它将无法工作，因为从query()返回的数组显然不是DOM元素。

因此，如果query()实际上正在返回某些内容，则可以使用第一个位置：

Ext.ComponentQuery.query("#testPanel")[0]

或者，既然你似乎有一个ID分配给面板，你可以简单地使用getCmp（），它只返回匹配的元素，而不是数组：

Ext.getCmp( "testPanel" )

document.Body ComponentQuery

2 个答案: