Javascript document.Body组件查询

我正在使用一个很棒的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();
        }
    });

testbutton点击：函数（btn）{
html2canvas（document.body{
onrendered：函数（画布）{
新的分机窗口({
标题：“截图”，
//宽度：500，
身高：800，
可调整大小：正确，
autoScroll：是的，
重置：正确，
html:'
}).show（）；
}
});

html2canvas（）

似乎需要DOM元素。

Ext.ComponentQuery.query（）

返回匹配元素的数组，因此如果您精确地使用提供的代码，它将无法工作，因为从

query（）

返回的数组显然不是DOM元素

因此，如果

query（）

实际上返回了一些内容，您可以使用第一个位置：

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

或者，由于您似乎已经为面板分配了一个ID，您可以简单地使用getCmp（），它将只返回匹配的元素，而不返回数组：

Ext.getCmp( "testPanel" )

您需要getEl（）.dom。下面是一个独立的示例（使用Ext4.2.x测试）：

Ext.onReady（函数（）{
Ext.define（'面板'{
扩展：“Ext.panel.panel”，
框架：对，
标题：“测试面板”，
宽度：300，
身高：300，
onClick:function（）{
html2canvas（this.getEl（）.dom{
onrendered：函数（画布）{
新的分机窗口({
标题：“截图”，
宽度：300，
身高：300，
html:'
}).show（）；
}
});
},
initComponent:函数（）{
变量配置={
项目：[
{
xtype:“日期选择器”
},
{
xtype:'按钮'，
文本：“捕获此面板”，
handler:this.onClick，
范围：本
}
]
};
Ext.apply（this，Ext.apply（this.initialConfig，config））；
this.callParent（参数）；
}
});
变量面板=Ext.create（'面板'{
renderTo:Ext.getBody（）
});
});

Ext.ComponentQuery.query

返回组件对象数组。如果要获取组件dom元素，必须使用

Ext.ComponentQuery.query（#testPanel”）[0]。getEl（）.dom

。另外

Ext.getCmp（“testPanel”）

返回组件的对象，而不是dom元素。

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()
    });
});