JSFiddle - React, Tailwind, and code Playground

by Ramkumar Pillai

HTML

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

JavaScript

Ext.define('MyApp.view.LookupContainer', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.lookupcontainer',
    theNumberField: null,
    theTextField: null,
    theButton1: null,
    theButton2: null,

    layout: {
        type: 'column'
    },
    labelAlign: 'right',
    
    initComponent: function() {
        var me = this;

        var formNumberField = Ext.apply(
            {
                xtype: 'numberfield',
                columnWidth: 0.15,
                maxValue: 99999,
                minValue: 0
            }, me.theNumberField || {});

        var formTextField = Ext.apply(
            {
                xtype: 'textfield',
                columnWidth: 0.75,
                margin: '0 0 0 5',
                readOnly: true
            }, me.theTextField || {});

        var formButton1 = Ext.apply(
            {
                xtype: 'button',
                cls: 'x-formButton',
                margin: '0 0 0 5',
                overCls: 'x-formButtonOver',
                iconCls: 'icon-lov'
            }, me.theButton1 || {});

        var formButton2 = Ext.apply(
            {
                xtype: 'button',
                margin: '0 0 0 5',
                iconCls: 'icon-program'
            }, me.theButton2 || {});
        
        Ext.applyIf(me, {
            items: [
                formNumberField,
                formTextField,
                formButton1,
                formButton2
            ]
        });

        me.callParent(arguments);
    }

});

Ext.define('MyApp.view.SomeForm',{
    extend: 'Ext.window.Window',
    requires: [
        'MyApp.view.LookupContainer'
    ],
    height: 500,
    width: 600,
    closable: true,
    maximizable: true,
    modal: true,
    title: 'My Form',
    layout : {
        type: 'fit'
    },
    initComponent : function() {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                xtype: 'form',
                status: 'I',
                id:...