Javascript Can'；t将元素/组件附加到Extjs面板

我试图在面板上附加一个按钮。首先，我创建面板，并将其渲染到Ext.getBody（）。这似乎工作正常，但我想在该面板上渲染一个按钮，它会出现以下错误：

未捕获的TypeError:无法读取null的属性“dom”

代码如下：

Ext.onReady(function () {

    var p = Ext.create('Ext.Panel',{
        renderTo:Ext.getBody(),
        html:'myPanel'
    })


    Ext.create('Ext.Button', {
        text: 'Click me!!!!',
        renderTo: p,
        handler: function() {
            alert('You clicked the button!')
        }
    });
});

在这里拉小提琴：

---

了解组件和元素之间的差异非常重要

组件是

Ext.component

或其子类之一的实例。元素引用DOM

在您的情况下，配置需要一个元素，但您正在向它传递一个组件

嵌套组件时，通常使用容器

由于

Ext.Panel

是一个容器，您只需将按钮添加到其中即可。您可以通过使用配置来实现这一点（正如您的问题注释中已经指出的）：

或者-如果要在组件已创建后添加按钮，请使用以下方法或：

有用的文件资源：

---

顺便说一句，我对extJScheck@MMT非常陌生：你不再需要

renderTo

配置了。在这种情况下，它正好可以工作，因为

p

当时是

未定义的
。@matt是的，你是对的，我只是从以前的小提琴上复制了它，现在更新了它。
var p = Ext.create('Ext.Panel',{
    renderTo:Ext.getBody(),
    title:'myPanel',
    items: [
        Ext.create('Ext.Button', {
            text: 'Click me!!!!',
            handler: function() {
                alert('You clicked the button!');
            }
        })
    ]
});

p.add(Ext.create('Ext.Button', {
    text: 'Click me!!!!',
    handler: function() {
        alert('You clicked the button!');
    }
}));