Can't append Element/Component to a Extjs Panel

Question

I am trying to append a button to a panel. First I create the panel, and render it to Ext.getBody() . That seems to work fine, but then I want to render a button to that panel, and it gives this error :

Uncaught TypeError: Cannot read property 'dom' of null

Here is the code :

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

Fiddle here :

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

Answer 1

It is important to understand the difference between components and elements here.

A component is an instance of Ext.Component or one of its subclasses. An element refers to the DOM.

In your case, the renderTo configuration expects an element, but you're passing a component to it.

When nesting components you will typically use containers.

As Ext.Panel is a container all you need to do is add your button to it. You can either do that by using the items config (as already pointed out in your question's comments):

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

or - if you want to add the button after the component was already created - using the methods add or insert :

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

Useful documentation resources:

• Layouts & containers
• Components