为什么 renderTo 在 xtype 中不起作用

Question

简单代码：

var myPanel = {
    xtype : 'panel',
    height : 100,
    width : 100,
    html : 'Hello!',
    renderTo:Ext.getBody()
};

为什么 renderTo 在 xtype 中不起作用？但是这段代码有效：

Ext.define('MyApp.CustomClass', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myCustomComponent'
});

new Ext.Panel({
    renderTo:Ext.getBody(),
    items : [{
        xtype : 'myCustomComponent',
        html:'World'
    }]
});

Answer 1

在下面你没有初始化面板，你需要调用它/传递给ExtJs来解析和初始化class。这部分代码只是一个 Javascript 对象，ExtJs 不知道它。

var myPanel = {
    xtype: 'panel',
    height: 100,
    width: 100,
    html: 'Hello!',
    renderTo: Ext.getBody()
};

因此，要使用 ExtJs 对其进行初始化，您需要使用 Ext.create 调用，如下所示。

var myPanel = {
    xtype: 'panel',
    height: 100,
    width: 100,
    html: 'Hello!',
    renderTo: Ext.getBody()
};

Ext.create(myPanel);

这里还有一个fiddle演示

为什么 renderTo 在 xtype 中不起作用

Why renderTo don't work in xtype

extjs