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('Viewport1', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                xtype: 'container',
                region: 'center'},
            {
                xtype: 'container',
                height: 100,
                region: 'north',
                items: [
                    {
                    xtype: 'button',
                    text: 'MyButton',
                    handler: function() {
                        var f1 = this.up('viewport').down('[region=center]').getComponent('#f1');
                        if(!f1){
                            f1 = Ext.create('Form1');
                            Ext.util.Observable.capture(f1, function(){
                                console.log('f1', arguments);
                            })
                        }

/*f1 = Ext.create('Form1');

                        Ext.util.Observable.capture(f1, function() {
                            console.log('f1', arguments);
                        }); */
                    }},
                {
                    xtype: 'button',
                    text: 'MyButton',
                    handler: function() {

                        var f2 = Ext.create('Form2');
                        Ext.util.Observable.capture(f2, function() {
                            console.log('f2', arguments);
                        });
                    }}
                ]}
            ]
        });

        me.callParent(arguments);
    }
});

Ext.define('Form1', {
    extend: 'Ext.form.Panel',
    id: 'f1',

    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                xtype: 'textfield',
                fieldLabel: 'Label',
                anchor: '100%'}
            ]
        });

       ...