JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

JavaScript

Ext.define('A', {
    //extend: 'Ext.container.Container',
    extend: 'Ext.Base',
    
    style: 'border: 1px solid #555; margin: 10px; padding: 10px;',
    
    items: [{
        xtype: 'component',
        itemId: 'a',
        html: 'A'
    }],
    
    constructor: function () {
        this.items = [].concat(this.items || []);        
        
        this.doStuff(this.items);
        this.checkItems();

        this.callParent();
    },
    
    doStuff: function () {
        var cmp = {
            xtype: 'component',
            itemId: 'd',
            html: 'D'
        };
                
        //this.items = [cmp].concat(this.items || []);
        this.items.unshift(cmp);

        this.items.forEach(function (item) {
            console.dir(item);
        });
        
    },
    
    checkItems: function () {
        var item;
        
        if (this.items.length > 0) {
            item = this.items[1];
        
            if (item) {
                console.log(item.itemId);        
            }
        }

        console.assert(this.items.length === 2);
    }
});

Ext.define('B', {
    extend: 'A',
    items: [{
        xtype: 'component',
        itemId: 'b',
        html: 'B'
    }]/*,
    
    checkItems: function () {
        var item = this.items[1];
        
        console.log(item.itemId);        
        console.assert('b' === item.itemId);
    }*/ 
});

Ext.define('C', {
    extend: 'A',
    items: [{
        xtype: 'component',
        itemId: 'c',
        html: 'C'
    }]/*,
    
    checkItems: function () {
        var item = this.items[1];
        
        console.log(item.itemId);        
        console.assert('c' === item.itemId);
    }*/
});

Ext.create('C', { renderTo: Ext.getBody() });
Ext.create('B', { renderTo: Ext.getBody() });
Ext.create('A', { renderTo: Ext.getBody() });
Ext.create('B', { renderTo: Ext.getBody() });