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

Question

我试图在现有图像或现有面板上渲染图像，但出现错误。根据文档，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()
}

Answer 1

尽量避免从 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(),
        });
    }
});

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

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

How to properly use renderTo property in extjs?

image

dom

extjs