JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all-debug.js"></script>
JavaScript
Ext.onReady(function() {
var viewport = Ext.create('Ext.container.Viewport', {
defaultType: 'container',
layout: 'border',
items: [
{
defaultType: 'container',
layout: 'fit',
region: 'center',
autoScroll: true,
items: [
{
defaultType: 'container',
minWidth: 800,
layout: 'anchor',
items: [
{ html: 'banner1' },
{ html: 'banner2' },
{ html: 'banner3' },
{ html: 'banner4' },
{
defaultType: 'container',
margin: '20 20 20 20',
defaults: {
margin: '0 0 15 0'
},
html: '1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />'
},
{
id: 'footer',
defaultType: 'container',
padding: '10 0 10 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
{
html: 'Blaaah'
}
...