JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: [{
        name: 'F02ORAIN1',
        type: 'date'},
    {
        name: 'F02ORAOU1',
        type: 'date'}],
    data: [
        {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},
    {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},
    {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},
    {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},
    {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},
    {
        F02ORAIN1: new Date(),
        F02ORAOU1: new Date()},

        ],

});
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
        xtype: 'datecolumn',
        text: 'IN1',
        dataIndex: 'F02ORAIN1',
        format: 'g:i A',
        field: {
            xtype: 'timefield',
            id: 'editF02ORAIN1',
            validator: function(value) {
                if (!Ext.getCmp('editF02ORAOU1').getValue()) return true;
                if (this.getValue() > Ext.getCmp('editF02ORAOU1').getValue()) return 'IN1 should be less then OU1';
                return true;
            }
        }},

    {
        xtype: 'datecolumn',
        dataIndex: 'F02ORAOU1',
        text: 'OU1',
        format: 'g:i A',
        field: {
            xtype: 'timefield',
            id: 'editF02ORAOU1',
            validator: function(value) {
                if (!Ext.getCmp('editF02ORAIN1').getValue()) return true;
                if (this.getValue() < Ext.getCmp('editF02ORAIN1').getValue()) return 'IN1 should be less then OU1';
                return true;
            }
        }}
    ],
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {})
        ],

    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});