JSFiddle - React, Tailwind, and code Playground

by sran

HTML

<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">

CSS

.green{
  color: green;
}

JavaScript

Ext.onReady(function () {
  Ext.define('Ext.ux.field.Text',{
    extend: 'Ext.form.field.Text',
    widget: 'uxtextfield',
    setColored: function(val,color) {
      var me = this;
      if (me.settedCls) {
        me.removeCls(me.settedCls);
      }
      me.addCls(color);
      me.settedCls = color;
      me.setValue(val,true);
    },
    setValue: function(val,take) {
        var me = this;
        if (!take && me.settedCls) {
          me.removeCls(me.settedCls);
        }
        me.callParent(arguments);
        return me;
    }
  });
  
  
  var field = Ext.create('Ext.ux.field.Text',{
      name: 'name',
      fieldLabel: 'Message',
      allowBlank: false
  });
  var field2 = Ext.create('Ext.ux.field.Text',{
      name: 'name',
      fieldLabel: 'Message',
      allowBlank: false
  });
  Ext.create('Ext.form.Panel', {
      title: 'Contact Info',
      emptyText: 'fill me',
      width: 300,
      bodyPadding: 10,
      renderTo: Ext.getBody(),
      items: [field,field2]
  });
  
  field.setColored('Hello there', 'green');
  field2.setColored('Hello there', 'green');
  field2.setValue('Hello there');
});