JSFiddle - React, Tailwind, and code Playground

by sloga

HTML

<link rel="stylesheet" href="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/resources/css/ext-all.css">
<script src="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script src="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/ext-all.js"></script>
<link rel="stylesheet" href="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/menu/menus.css">
<script src="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/menu/menus.js"></script>
<link rel="stylesheet" href="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/shared/examples.css">
<script src="http://ngs.woc.noaa.gov/storms/scripts/ext-3.2.1/examples/shared/examples.js"></script>
<h1>Toolbar with Menus</h1>

<div id="container">
    <div id="toolbar"></div>
</div>

JavaScript

Ext.onReady(function(){
    var tb = new Ext.Toolbar();
    tb.render('toolbar');

var locations = [
    [23, 'Main Room'],
    [1, 'Main Lobby'],
    [2, 'Training Room'],
    [56, 'Main Office'],
    [57, 'Lower Office'],
    [9, 'Lower Lobby'],
    [62, 'Conference Room'],
    [22, 'Outdoor Patio'],
    [63, 'Upper Lobby']
];

var items = [];

Ext.Array.forEach (locations, function (item) {
    items.push({
        id: 'item' + item[0],
        text: item[1]
    });
});

var scrollMenu = new Ext.menu.Menu({
    items: items
});

// scrollable menu
tb.add({
    icon: 'preview.png',
    cls: 'x-btn-text-icon',
    text: 'Scrolling Menu',
    menu: scrollMenu
});
});