JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/resources/css/app-b35792cfe6686887f720936b33191682.css">

JavaScript

Ext.define('Ext.form.CustomField', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.customfield',
    
    width: 300,
    constructor: function(config) {
        this.callParent([config]);
    },
    getValue : function(){
        
        return "test"; // I want to force new value.
    },
    setValue : function(val){},
    initComponent: function() {
        this.items = ([{'xtype' : 'button',text : 'some button'}]);
        this.callParent();
    }
});



var form = Ext.create('Ext.form.Panel', {
    title: 'Base Example',
    url : "/test",
    
    layout: 'hbox',
    items: [{
        xtype: 'customfield',
        fieldLabel: 'Search',
        name: 'search_field',
        enableKeyEvents: true,
            }, {
                xtype: 'button', text : 'submit',handler : function(){form.submit();}
    }],
    
    renderTo: Ext.getBody()
});