JSFiddle - React, Tailwind, and code Playground

by el_chief

HTML

<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />

JavaScript

Ext.define('Mcg.view.Viewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                xtype: 'container',
                layout: {
                    type: 'fit'
                },
                region: 'center'},
            {
                xtype: 'container',
                height: 70,
                html: 'appage',
                region: 'north'}
            ]
        });

        me.callParent(arguments);
    }
});

Ext.define('Mcg.navigation.View', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.navigationview',

    layout: {
        type: 'card'
    },

    push: function(view) {
        this.add(view);
        this.getLayout().setActiveItem(view);
        view.navigationView = this;
    },

    pop: function() {
        var ai = this.getLayout().getActiveItem();
        console.log(ai);
        this.remove(ai);
        this.getLayout().setActiveItem(this.items.length-1);        
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                    xtype: 'button',
                    text: 'Back'},
                {
                    xtype: 'button',
                    text: 'Done',
                    handler: function() {
                        var nv = this.up('navigationview');
                        var ai = nv.getLayout().getActiveItem();
                        ai.fireEvent('return', ai, {
                            success: true,
                            data: ai.down('textfield').getValue()
                        });
                    }},
                {
                    xtype: 'button',
                    text: 'Close',
                    handler:...