JSFiddle - React, Tailwind, and code Playground

by sammy

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
<script src="http://cdn.sencha.io/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>

JavaScript

Ext.define('Foobar.view.Main', {
	extend: 'Ext.Panel',
	xtype: 'main',
	requires: [
		'Ext.TitleBar',
		'Ext.Video'
	],
	config: {
		layout: {
			type: 'card',
			animation: 'flip'
		},

		items: [
			{
				xtype: 'panel',
				
				items: [
					{
						xtype: 'fieldset',
						layout: {
							type: 'vbox',
							pack: 'center'
						},
						
						items: [
							{
								xtype: 'emailfield',
								name : 'email',
								placeHolder: 'Email'
							},
							{
								xtype: 'passwordfield',
								name : 'password',
								placeHolder: 'Password'
							}
						]
					}
				]
			}
		]
	}
});

Ext.application({
	name: 'Foobar',

	requires: [
		'Ext.MessageBox'
	],

	views: [
		'Main'
	],

	icon: {
		'57': 'resources/icons/Icon.png',
		'72': 'resources/icons/Icon~ipad.png',
		'114': 'resources/icons/[email protected]',
		'144': 'resources/icons/[email protected]'
	},

	isIconPrecomposed: true,

	startupImage: {
		'320x460': 'resources/startup/320x460.jpg',
		'640x920': 'resources/startup/640x920.png',
		'768x1004': 'resources/startup/768x1004.png',
		'748x1024': 'resources/startup/748x1024.png',
		'1536x2008': 'resources/startup/1536x2008.png',
		'1496x2048': 'resources/startup/1496x2048.png'
	},

	launch: function() {
		// Destroy the #appLoadingIndicator element
		Ext.fly('appLoadingIndicator').destroy();

		// Initialize the main view
		Ext.Viewport.add(Ext.create('Foobar.view.Main'));
	},

	onUpdated: function() {
		Ext.Msg.confirm(
			"Application Update",
			"This application has just successfully been updated to the latest version. Reload now?",
			function(buttonId) {
				if (buttonId === 'yes') {
					window.location.reload();
				}
			}
		);
	}
});