如何在extjs中正确使用renderTo属性？

image dom extjs

我试图在现有图像或现有面板上渲染图像，但出现错误。根据文档，renderTo:后面可以跟有元素的id，一个DOM元素或者这个组件将被呈现到的现有元素。

然而，我总是犯错误。这是我的密码：

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

所以，使用renderTo: Ext.getBody(),它可以工作，但是如果我想在面板上渲染图像，当我尝试指定dom时，它失败了。

在同一个问题中，我突然想到另一个问题。如何将函数指定为特定方法的参数？例如，在前一种情况下，以下块也不正确：

renderTo: function(){
    return Ext.getBody()
}
✅ 最佳回答：

尽量避免从ExtJs访问HTML。框架对开发人员隐藏了它。初始化面板时不会呈现面板，必须在afterrender事件处理程序中放置适当的逻辑：

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

要设置类的属性，可以使用initComponent方法（类似于类的构造函数）。