JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext/gpl/4.2.0/resources/css/ext-all-neptune.css">

JavaScript

(function () {
    'use strict';
    
    var hideButton = function () {
        var cmp = this;
        
        cmp.hide();
    };
    
    // this isn't a perfect impl
    var syncTbar = function (tbar) {
        var lastButton,
            currentItem;
        
        tbar.items.each(function (item) {
            if (item.isXType('button')) {
                lastButton = item;
            } else {
                if (lastButton && lastButton.isHidden()) {
                    item.hide();
                } else {
                    item.show();
                }
            }
        });
    };
    
    Ext.widget({
        xtype: 'panel',
        width: 300,
        height: 200,
        tbar: [{
            xtype: 'button',
            text: 'One',
            handler: hideButton
        }, {
            xtype: 'tbseparator'
        }, {
            xtype: 'button',
            text: 'Two',
            handler: hideButton
        }, {
            xtype: 'tbseparator'
        }, {
            xtype: 'button',
            text: 'Three',
            handler: hideButton
        }],
        items: [{
            xtype: 'button',
            text: 'Show All',
            handler: function () {
                var cmp = this,
                    tbar;
                
                tbar = cmp.up('panel').getDockedItems('toolbar[dock="top"]')[0];

                 tbar.query('button').forEach(function (button) {
                    button.show();;
                });
            }
        }],
        listeners: {
            afterrender: function () {
                var cmp = this,
                    tbar;
                
                tbar = cmp.getDockedItems('toolbar[dock="top"]')[0];
                
                tbar.query('button').forEach(function (button) {
                    button.enableBubble(['hide', 'show']);
                });
            },
            
            hide: function (cmp) {
                var tbar;
                         ...