Rendering custom xtype widget to a container

Question

I create a custom xtype widget from a promooted class. When I want to render the widget to a container I get an error Cannot read property 'dom' of null.

cont is my container

var d = Ext.widget('MultiViewComponent', {
                renderTo: cont
            });

I have tried renderTo:cont.getLayout(). I have also tried using cont.add and then cont.doLayout();

For 'renderTo' documentation states: Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.

When using add to add multiple times. All components are visible on the screen but only one is inside cont.items.items(last one added) So when using cont.removeAll() only one is removed.

What am I missing here or doing wrong? Please help and advise.

UPDATE: If try to remove the widgets from container using container.removeAll() only one of the widgets is deleted. Looking into container.items.items only one was there even if multiple components were added.

 var d = Ext.widget('MultiViewComponent', {
            });

            cont.add(d);
            cont.doLayout();

//later 

cont.removeAll();

MultiViewComponent

Ext.define('myApp.view.MultiViewComponent', {
    extend: 'Ext.container.Container',
    alias: 'widget.MultiViewComponent',

    requires: [
        'Ext.form.Label',
        'Ext.grid.Panel',
        'Ext.grid.View',
        'Ext.grid.column.Date',
        'Ext.grid.column.Number'
    ],

    height: 204,
    itemId: 'multiViewComponent',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    xtype: 'label',
                    itemId: 'multiViewLabel',
                    text: 'My Label'
                },
                {
                    xtype: 'gridpanel',
                    itemId: 'multiViewGrid',
                    width: 498,
                    title: 'My Grid Panel',
                    store: 'Document',
                    columns: [
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'dateCreated',
                            text: 'DateCreated'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'documentType',
                            text: 'DocumentType'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'description',
                            text: 'Description'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'creator',
                            text: 'Creator'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'fileId',
                            text: 'FileId'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'metaFileId',
                            text: 'MetaFileId'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'uid',
                            text: 'Uid'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Answer 1

cont.items is an Ext.util.MixedCollection, not an array. The underlying array is at cont.items.items. Anyway, you don't want to touch that. Use Ext.container.Container#remove to remove your child component afterward.

Your docs quote says it all... Containers do plenty of things with their components, most notably rendering, layout, and ComponentQuery wiring. You can't just change their DOM elements or javascript member variable and expect them to work. They have to be aware of when their state change to react accordingly, that's why you should always use the documented public methods to manipulate them. To let them know something happen and give them the chance to act on it.

Update

Given your feedback, it seems apparent that you're doing something funky with your code. Can't say because you haven't posted it... But here's a complete working example of what you want to do. Check your own code against it.

Ext.define('My.Component', {
    extend: 'Ext.Component'

    ,alias: 'widget.mycmp'

    ,html: "<p>Lorem ipsum dolor sit amet et cetera...</p>"

    ,initComponent: function() {
        if (this.name) {
            this.html = '<h1>' + this.name + '</h1>' + this.html;
        }
        this.callParent();
    }
});

Render a container with two initial children:

var ct = Ext.widget('container', {
    renderTo: Ext.getBody()
    ,items: [{
        xtype: 'mycmp'
        ,name: 'First static'
    },{
        xtype: 'mycmp'
        ,name: 'Second static'
    }]
});

Adding a child dynamically post creation:

// Notice that layout is updated automatically
var first = ct.add({
    xtype: 'mycmp'
    ,name: 'First dynamic'
});

// Possible alternative:
var firstAlt = Ext.widget('mycmp', {
    name: 'First dynamic (alternative)'
});
ct.add(firstAlt);

And so on...

var second = ct.add({
    xtype: 'mycmp'
    ,name: 'Second dynamic'
});

Removing a given child by reference:

ct.remove(first);

Removing a component by index:

ct.remove(ct.items.getAt(1));

Removing all components:

ct.removeAll();

Update 2

Your error is the itemId. One container must not have two items with the same itemId.