無法將元素/組件附加到Extjs面板

Question

我正在嘗試將一個按鈕附加到面板上。 首先，我創建面板，並將其渲染到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!')
        }
    });
});

在這里擺弄：

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

Answer 1

在此處了解組件和元素之間的區別很重要。

組件是Ext.Component或其子類之一的實例。 元素是指DOM。

在您的情況下， renderTo配置需要一個元素，但是您正在向其傳遞組件。

嵌套組件時，通常將使用容器。

因為Ext.Panel是一個容器，所以您只需要將按鈕添加到其中即可。 您可以使用items config來做到這一點（正如您的問題注釋中已經指出的那樣）：

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

有用的文檔資源：

• 布局和容器
• 組件