JSFiddle - React, Tailwind, and code Playground

by vinayaknb

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

Ext.require([
    'Ext.form.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {
    var parentPanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'form',
            id: 'sampleform',
            border: false,
            padding: '5 0 0 0',
            bodyPadding: 5,
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Theme Name',
                name: 'themeName',
                itemId: 'themeName',
                allowBlank: false,
                listeners: {
                    'change': function(textField, newVal, oldVal, opt) {
                        var displayField = Ext.ComponentQuery.query('[name=Text]');
                        displayField[0].setValue(newVal);
                    }
                }
            }, {
                xtype: 'displayfield',
                fieldLabel: 'Text',
                itemId: 'themeText',
                name: 'Text',
                value: '<div class="theme-text-upload"></div>'
            }, {
                xtype: 'button',
                text: 'populate Text Field',
                handler: function() {
                    var form = this.up('form');
                    var field = form.getForm();
                    var textField = Ext.ComponentQuery.query('[name=themeName]');
                    textField[0].setValue("updated value");
                }
            }]
        }]
    });

    var setValueToTextField = function() {
        alert('test');
        var form = Ext.getCmp("form");
        var field = form.getForm();
        for (var i = 0; i < field.items.length; i++) {
            var name = field.items[i].name;
            var fieldData = data[name];
            if (field.items[i].xtype === 'textfield') {
                field.items[i].setValue(fieldData);
            }
        }
    };
});