When an item is dynamically added to the created component, if there is an error in the item, the application crashes.

This problem does not exist when the item is not created.

Ext.define('Test', {
    extend: 'Ext.panel.Panel',

    initComponent: function () {
        //  make error
        // this.callParent();
    }
});

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Application',
    layout: {
        type: 'vbox',
        align: 'center',
    },

    defaults: {
        margin: 10,
    },

    items: [{
        xtype: 'button',
        iconCls: 'x-fa fa-cog',
        handler: function (btn) {
            let mainPanel = btn.up('panel'),
                item = Ext.create('Test');

            // bug
            mainPanel.add(item);
        },
    }],
});

sencha fiddle

CodePudding user response：

Strange problem, because you are trying to find out if the developer did something wrong during runtime.

But anyways - here is one solution for your problem:

        handler: function (btn) {
            let mainPanel = btn.up('panel'),
                item = Ext.create('Test');

            // bug testing
            if(Ext.isDefined(item) && Ext.isObject(item.layout)) {
                mainPanel.add(item);
            } else {
                console.error(item.id   ' could not be added because of an error I made.')
            }
        },