JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all-debug.css">
<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all-debug.js"></script>
JavaScript
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [
{
xtype: 'radiogroup',
flex: 8,
vertical: true,
columns: 1,
labelWidth: 50,
id: 'radio_group_id',
fieldLabel: 'Group Label',
items: [{
boxLabel: 'option 1',
name: 'rb-auto',
inputValue: 1,
checked: true
}, {
boxLabel: 'option 2',
name: 'rb-auto',
inputValue: 2
}, {
boxLabel: 'option 3',
name: 'rb-auto',
inputValue: 3,
listeners: {
render: function() {
this.boxLabelEl.update("");
this.field = Ext.create('Ext.form.field.Number', {
renderTo: this.boxLabelEl,
width: 40,
disabled: !this.getValue()
});
this.boxLabelEl.setStyle('display','inline-block');
},
change: function() {
this.field.setDisabled(!this.getValue());
}
}
}, {
boxLabel: 'option 4',
name: 'rb-auto',
inputValue: 4
}, {
boxLabel: 'option 5',
name: 'rb-auto',
inputValue: 5
}]
}
]
});
});