JSFiddle - React, Tailwind, and code Playground

by cpastore84

HTML

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

JavaScript

Ext.onReady(function () {
    Ext.create('Ext.form.Panel', {
        margin: 10,

        items: [{
            xtype: 'button',
            text: 'Toggle Container',
            handler: function (btn) {
                // hide or show fieldcontainer
                var owner = this.ownerCt,
                    fc = owner.down('fieldcontainer');
                
                fc.setVisible(!fc.isVisible());
                alert('Form Valid: ' + owner.isValid());
            }
        }, {
            xtype: 'container',
            id: 'my-error-container'
        }, {
            xtype: 'fieldcontainer',
            msgTarget: 'my-error-container',
            combineErrors: true,
            defaultType: 'textfield',
            padding: 10,

            // set listeners to disable child fields
            listeners : {
                hide : function (container) {
                    container.query('field').forEach(function (field) {
                        field.setDisabled(true);
                    });
                },

                show : function (container) {
                    container.query('field').forEach(function (field) {
                        field.setDisabled(false);
                    });
                }
            },
            
            layout: 'anchor',
            defaults: {
                layout: '100%'
            },

            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'none',
                allowBlank: false
            },

            items: [{
                fieldLabel: 'Username',
                name: 'username',
                minLength: 5,
                vtype: 'email'
            }, {
                fieldLabel: 'Last Name',
                name: 'lastname'
            }]
        }],

        renderTo: Ext.getBody()
    });
});