JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">
JavaScript
var win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
width: 750,
height: 500,
layout: 'fit',
animCollapse: true,
bodyPadding: 5,
items: [{
xtype: 'container',
layout: 'column',
items: [{
xtype: 'fieldset',
columnWidth: '0.5',
style: 'margin-right: 5px',
title: 'Details',
layout: 'anchor',
items: [{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'customer_name',
id: 'customer_name',
width: 300
}, {
xtype: 'displayfield',
fieldLabel: 'ID Card',
id: 'customer_id',
name: 'customer_id',
width: 300
}, {
xtype: 'displayfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
width: 300
}]
}, {
xtype: 'fieldset',
columnWidth: '0.5',
title: 'Details',
layout: 'anchor',
autoHeight: true,
items: [{
xtype: 'textfield',
labelWidth: 120,
fieldLabel: 'invoice',
anchor: '98%',
name: 'invoice_number',
id: 'invoice_number',
allowBlank: false,
readOnly: true
}, {
xtype: 'textfield',
labelWidth: 120,
fieldLabel: 'Payment Amount',
anchor: '98%',
name: 'payment_amount',
id: 'payment_amount',
allowBlank: false
}, {
xtype: 'button',
id: 'test',
text: 'test',
handler: function () {
...