JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//content.web/stylesheets/xero.css">
<form id="form" action="#" method="GET">
    <label>
        Number of fields to create
        <input type="number" name="number-of-fields" min="0" value="1000"/>
    </label>
    <button>Create Form</button>
    <button id="cleanup">Cleanup Form</button>
</form>
<div id="field-container"></div>

SCSS

.x-form-field.x-form-text {
    min-width: 200px;
    text-align: right;
    padding-right: 4px;
}

JavaScript

var formEl = Ext.get('form'),
    buttonEl = Ext.get('cleanup'),
    container = document.getElementById('field-container');

function appendTo(el, parentEl) {
    parentEl.innerHTML = el.innerHTML;
}

formEl.on('submit', function (e, t) {
    var fragment = document.createDocumentFragment(),
        cmp,
        fields = [],
        n,
        i;
    
    n = +(this.dom.elements['number-of-fields'].value);
    
    Ext.fly(this.down('button')).set({
        disabled: 'disabled'
    });
    
    console.time('create-fields');
    
    for (i = 0; i < n; i++) {
        fields.push({
            xtype: 'numberfield',
            name: 'field-' + i,
            fieldLabel: '' + (i + 1),
            labelAlign: 'top',
            value: i % 4 === 0 ? Math.random() * 1000 : 0,
            minValue: 0,
            decimalPrecision: 2,
            hideTrigger: true
        });
    }
    
    cmp = Ext.widget({
        xtype: 'container',
        id: 'field-container',
        items: fields,
        renderTo: {
            dom: fragment
        },
        onDestroy: function() {
            debugger;
            this.removeAll();
        }
    });
    
    //debugger;
    appendTo(fragment, container);
    
    console.timeEnd('create-fields');
    
    console.assert(n === cmp.items.getCount());
    console.assert(n === cmp.query('numberfield').length);
}, formEl, { preventDefault: true });

buttonEl.on('click', function () {
    console.time('destroy-fields');
    Ext.getCmp('field-container').destroy();
    console.timeEnd('destroy-fields');
}, buttonEl);