JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
JavaScript
Ext.onReady(function() {
var innerContainer = Ext.create('Ext.container.Container', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: '1',
flex: 1},
{
xtype: 'panel',
title: '2',
flex: 1}]},
{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: '3',
flex: 1},
{
xtype: 'panel',
title: '4',
flex: 1}]},
{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: '5',
flex: 1},
{
xtype: 'panel',
title: '6',
flex: 1}]},
{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: '7',
flex: 1},
{
xtype: 'panel',
title: '8',
flex: 1}]}]
});
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: innerContainer,
renderTo: Ext.getBody()
});
});