JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://content.web/stylesheets/xero.css">
<div id="content" class="x-content">
    <p class="text">3 seconds after opening the split button the menu items will change.</p>
</div>

JavaScript

(function () {
    function map(item) {
        return {
            text: item
        };
    }

    function widget(item) {
        var config = Ext.apply(item, {
            xtype: 'menuitem'
        });

        return Ext.widget(config);
    }

    Ext.widget({
        xtype: 'splitbutton',
        text: 'Button',
        menu: {
            items: Ext.Array.map(['One', 'Two', 'Three'], map)
        },
        renderTo: 'content'
    });

    window.setTimeout(function () {
        var data = ['Five', 'Six', 'Seven', 'Eight'],
            menu = Ext.ComponentQuery.query('menu')[0];

        menu.removeAll();

        Ext.Array.each(Ext.Array.map(Ext.Array.map(data, map), widget), (function (item) {
            menu.add(item);
        }));
        
        if (!menu.isHidden()) {
            menu.hide();
        }
    }, 3000);
}());