JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sencha Touch 2</title>
    <link rel="stylesheet" href="http://www.aldomatic.com/sencha/aldo/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="http://www.aldomatic.com/sencha/aldo/js/sencha-touch-all.js"></script>
</head>
<body></body>
</html>

JavaScript

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        //---------------------------------
        //    Title Bar
        //---------------------------------
        var header = new Ext.Toolbar({
            dock: 'top',
            title:'This is the title'
        });

        //---------------------------------
        //    Footer
        //---------------------------------
        var footer = new Ext.Toolbar({
            dock: 'bottom',
            title:'This is the Footer'
        });

        //---------------------------------
        //    Left Side
        //---------------------------------
        var groupLeftSide = {
            margin:'10px',
            html:[
                'Hello World<BR>',
                "I'm the right side",
                '<HR>',        
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>',        
            ].join("")
        }

        var leftSidePanel = new Ext.Panel({
            style:"border-right:solid black 1px;",
            scroll:'vertical',
            dock: 'left',
            width:200,
            items:[groupLeftSide]
        });

        //---------------------------------
        //    Right Side
        //---------------------------------
        var groupContentSide = {
            margin:'10px',
            html:[
                'Hello World<BR>',
                "I'm the content side",
                '<HR>',
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>',
                'this is a line<BR>'
            ].join("")
        }

        var contentSidePanel = new Ext.Panel({
            //fullscreen: true,
           ...