document.Body ComponentQuery

Question

I am using an awesome html2canvas function but I have a noob question. How do I change the field it is capturing from document.body to a specific panel? In short i need to change document.body to the panel I want to capture, I just don't know the code to get the panel I want.

I have tried Ext.ComponentQuery.query('#testPanel') without any success.

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

You want getEl().dom. Here's a standalone example (tested with 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() appears to require a DOM element. Ext.ComponentQuery.query() returns an array of matched elements, so if you use precisely the code you provided, it won't work since the array returned from query() is obviously not a DOM element.

So if query() is actually returning something, you could use the first position:

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

Or, since you seem to have an ID assigned to the panel, you could simply use getCmp(), which will return only the element which is matched, and not an array:

Ext.getCmp( "testPanel" )