JSFiddle - React, Tailwind, and code Playground

by johanhaest

JavaScript

Ext.define('Crystal.view.apphb', {
    extend: 'Ext.Container',
    xtype: 'apphb',
    id: 'apphb',
    requires: ['Ext.Anim', 'Ext.TitleBar'],
    defaults: {
        centered: true
    },
    config: {
        layout: {
            type: 'card'
        },
        items: [{
            xtype: 'panel',
            style: "background-color: rgba(255, 255, 255, 0.0);",
            layout: 'vbox',
            fullscreen: true,
            items: [{
                xtype: 'img',
                src: 'resources/img/main/apphb.png',
                flex: 1,
                listeners: {
                    tap: function () {
                        if (Ext.getCmp('panel1').isHidden(true)) {
                            Ext.getCmp('panel1').show();
                        } else {
                            Ext.getCmp('panel1').hide();
                        }
                        if (Ext.getCmp('apphbt').isHidden(true)) {
                            Ext.getCmp('apphbt').show();

                        } else {
                            Ext.getCmp('apphbt').hide();
                        }
                    }
                }
            }, {

                xtype: 'toolbar',
                cls: 'custool',
                hidden: true,
                title: '',
                top: '840px',
                left: '7%',
                width: '86%',
                id: 'panel1',

                showAnimation: {
                    type: 'slide',
                    direction: 'up'
                },
                hideAnimation: {
                    type: "slideOut",
                    direction: "down"
                },

                styleHtmlContent: true,
                layout: 'hbox',
                defaults: {
                    flex: '1',
                    margin: '-15 ,0 ,0 ,0',
                    height: '45px',
                    style: 'font-size: 30px;'
                },
                items: [{
                    xtype:...