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">
<html>
    <head>
        <title>ExtJS4 Test</title>
    </head>
    <body>
    </body>
</html>

JavaScript

// BLOG form.getValues()                                       
//**************************//                        

Ext.onReady(function(){
    
    Ext.create('Ext.form.Panel',{ // xtype: 'form'
        title: 'Panel'
        , id: 'mainPanel'
        , renderTo: Ext.getBody()
        , margin: 30
        , bodyStyle: 'padding: 5px;'
        , items: [
            { xtype: 'textfield', fieldLabel: 'Textfield', name: 'Textfield', id: 'Textfield', itemId: 'Textfield'}
            , { xtype: 'datefield', fieldLabel: 'Datefield', name: 'Datefield' }
            , { xtype: 'timefield', fieldLabel: 'Timefield', name: 'Timefield' }
            , { xtype: 'checkbox', fieldLabel: 'Checkbox', name: 'Checkbox' }
            , { xtype: 'button', text: 'Get Values!', handler: process, margin: 10 }
            , { title: 'Default', name: 'old' }
            , { title: 'With useDataValues param', name: 'new' }
        ] // eo items
    });
});

var process = function() {
    var panel = Ext.getCmp('Textfield');
    writeData(panel.down('panel[name=old]')
              , panel.getValue());
    writeData(panel.down('panel[name=new]')
              , panel.getForm().getValues(false,false,false,true));
};

var writeData = function(panel, values) {
    var tpl = null, data = [];
    
    // build template data
    for ( var attr in values ) 
        data.push( { 
            attrName: attr
            , attrValue: values[attr]
            , type: typeof values[attr]
    } );
    
    var tpl = new Ext.XTemplate(
        '<ul><tpl for=".">'
            ,'<li>{attrName} <i>({type})</i>: {attrValue}</li>'
        ,'</tpl></ul>'
     );
    tpl.overwrite(panel.body, data);
    panel.doLayout();
}