javascript - 无法将元素/组件附加到 Extjs 面板

Question

我正在尝试将按钮附加到面板。首先，我创建面板，并将其渲染到 Ext.getBody()。这似乎工作正常，但后来我想向该面板呈现一个按钮，它给出了这个错误:

Uncaught TypeError: Cannot read property 'dom' of null

这是代码:

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

在这里摆弄:

https://fiddle.sencha.com/#fiddle/694

Answer 1

了解码件和元素之间的区别非常重要。

组件是 Ext.Component 或其子类之一的实例。元素引用 DOM。

就您而言，renderTo配置需要一个元素，但您正在向它传递一个组件。

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

由于 Ext.Panel 是一个容器，您所需要做的就是向其中添加按钮。您可以使用 items 来做到这一点配置(正如您的问题评论中已经指出的):

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

或者 - 如果您想在已创建组件之后添加按钮 - 使用方法 add或insert :

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

有用的文档资源:

• Layouts & containers
• Components