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

var addHandler = function (addBtn) {
    var addidFieldPanel = new Ext.form.Panel({
        //id: 'newidFieldPanel',
        width: 250,
        height: 100,
        floating: true,
        closable: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        bodyPadding: 10,
        items: [{
            xtype: 'textfield',
            itemId: 'name',
            fieldLabel: 'Name',
            name: 'newidFieldname',
            flex: 1,
            scope: this
        }, {
            xtype: 'textfield',
            itemId: 'dataType',
            fieldLabel: 'DataType',
            name: 'newidFielddataType',
            flex: 1,
            scope: this
        }],
        header: {
            titlePosition: 1,
            items: [{
                xtype: 'button',
                text: 'Save',
                handler: saveHandler
            }]
        }
    })
    addidFieldPanel.show();
};

var saveHandler = function (saveBtn) {
    var idPanel = Ext.getCmp('idFieldpanel'),
        valuePanel = saveBtn.up('panel'),
        name = valuePanel.getComponent('name').getValue(),
        dataType = valuePanel.getComponent('dataType').getValue();
        
    idPanel.add({
        xtype: "container",
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        defaults: {
            bodyPadding: 10,
            margin: '10 0 10 10'

        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name',
            itemId: 'name',
            name: 'Data',
            margin: '0 10 10 0',
            flex: 1,
            height: 'auto',
            value: name
        }, {
            xtype: 'textfield',
            fieldLabel: 'Datatype',
            name: 'Type',
            itemId: 'dataType',
            margin: '0 10 10 0',
            flex: 1,
            height: 'auto',
            value: dataType
        }]
    });
    
    // not sure if this is what you want
   ...