JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all.js"></script>
<p class="output">Clicked: <span id="output1">...</span></p>
<p class="output">Listened: <span id="output2">...</span></p>
<div id="menu2"></div>

CSS

body{
    font-family:arial,sans-serif;
}

p.output{
    padding: 5px;
    margin: 0px 0px 5px;
}

/* You can have all the fancy stuff here */
.item{
    display: block;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.item:hover{
    background:#eee;
}

JavaScript

/**
 * This is the column bars with clickable areas
 */
Ext.ns('NS');

NS.Menu2 = Ext.extend(Ext.Panel, {
    
    /**
     * @cfg menu
     * An array of menu items to be rendered into the component
     */
    menu: [],
    
    border: false,
    
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    
    initComponent: function() {
        
        var me = this;
        
        //Same thing, you can do event hook here:
        me.addEvents('menuclick');
        
        me.items = [];
        
        //Create all the boxes as you like
        Ext.each(me.menu, function(m) {
            me.items.push({
                html: m.text,
                bodyCssClass: 'item',
                bodyStyle: 'padding-bottom: 0px;margin-bottom: 0px;',
                listeners: {
                    afterrender: function(p) {
                        //As you can see, we hook the afterrender event so
                        //when your panels (each individual panels) are created,
                        //we hook the click event of the panel's root el.
                        p.el.on('click', function() {
                            Ext.get('output1').update(m.text);
                            
                            //Fires event
                            me.fireEvent('menuclick', me, m, p.el);
                        });
                    }
                }
            });
        });
        
        NS.Menu2.superclass.initComponent.call(this);
    }
});

new NS.Menu2({
    renderTo: 'menu2',
    height: 300,
    menu: [{
        text: 'This is the first menu'
    },{
        text: 'This is the 2nd menu'
    },{
        text: 'This is the last menu'
    }]
}).on('menuclick', function(cp, m) {
    Ext.get('output2').update(m.text);
});