JSFiddle - React, Tailwind, and code Playground

by YangHax

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<html>
    <head>
        <title>ExtJS4 Test</title>
    </head>
    <body>
    </body>
</html>

JavaScript

// ExtJS 4 Performance Forms
// http://WhatIsExtJS.com
//**************************//                        

var tabPanel = null
    , fieldsToRender = 100;

Ext.onReady(function(){
    tabPanel = Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody()                
        , title: 'Performance'
        , items: [ { title: 'Home Page' } ]
        , listeners: {
            show: function() {
                setValuesThenShow(function(){
                    showThenSetValues();
                });
                this.doLayout();
            }
        }           
    });
});

function setValuesThenShow(callback) {
    var timeStart = new Date()
        , panel = null
        , config= {
            title: 'setValuesThenShow'
            , listeners: {
                afterlayout: function() {
                    if ( this.ran ) return;
                    this.setTitle(this.title + " (" + (new Date()-timeStart) + "ms)");
                    this.ran = true;
                    callback();
                }
            }
            , defaults: { xtype: 'textfield', vtype: 'email' }
            , items: []
        };
    
    // Build inputs for lazy init
    for ( var i = 0; i < fieldsToRender ; i++ ) {
        config.items.push({
            fieldLabel: 'Test #' + (i+1)
        });
    }
    panel = tabPanel.add(config);
    
    // Add Values
    i = 0;
    panel.items.each(function(item) {
        i++;
        item.setValue('bad email #' + i);
    });
    
    panel.show();
}

function showThenSetValues() {
    var timeStart = new Date()
        , panel = null
        , config= {
            title: 'showThenSetValues'
            , listeners: {
                afterlayout: function() {
                    if ( this.ran ) return;
                    this.setTitle(this.title + " (" + (new Date()-timeStart) + "ms)");
                    this.ran = true;
                }
            }
            , defaults: { xtype: 'textfield', vtype: 'email' }
     ...