How to properly use renderTo property in extjs?

Question

I am trying to render the image over existing image or over existing panel, but I am getting an error. According to documentation renderTo: could be followed by the id of the element, a DOM element or an existing Element that this component will be rendered into.

However, I am always getting error. Here is my code:

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MyPanel', {
            extend: 'Ext.panel.Panel',
            title: 'My Panel',
            width: 690,
            height: 410,
            itemId: 'pp2',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'image',
                itemId: 'pp',
                id: 'pp1',
                height: 250,
                width: 350,
                src: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
            }]
        });

        var p = Ext.create('MyPanel');

        var crop = Ext.create('Ext.Img', {
            height: 165,
            width: 220,
            src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg',
            renderTo: Ext.getBody(),
            //renderTo: Ext.ComponentQuery.query('MyPanel[itemId=pp]').getEl().dom
            //renderTo: Ext.ComponentQuery.query('MyPanel').getEl().dom
            //renderTo: 'pp2'
        });
    }
});

So, with renderTo: Ext.getBody(), it works, but if i want to render the image over the panel, when I try to specify dom it fails.

Within the same question, another issue popped up into my mind. How to specify a function as a parameter of specific method? For example, in previous case, the following block is also incorrect:

renderTo: function(){
    return Ext.getBody()
}

Answer 1

Try to avoid access HTML from ExtJs. The framework hides it from developers. The panel is not rendered at the moment when you are initialising the your panel, you must put appropriate logic in the afterrender event handler:

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    width: 400,
    height: 200,

    items: [{
        xtype: 'image',
        itemId: 'pp',
        id: 'pp1',
        height: 250,
        width: 350,
        src: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
    }],
    listeners: {
        afterrender: function (panel) {
            var crop = Ext.create('Ext.Img', {
                height: 165,
                width: 220,
                floating: true,
                src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg',
                //renderTo: panel.getEl().dom // <-- Bad practice, but works
            });
            // Good practice. 
            panel.add(crop);
            crop.show();
        }
    },

    initComponent: function () {
        this.title = this.getTheTitle();
        this.callParent(arguments);
    },

    getTheTitle: function () {
        return "My wonderful Panel";
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('MyPanel', {
            renderTo: Ext.getBody(),
        });
    }
});

To set a property of the class you can use initComponent method (something like constructor of the class).