Base ExtJS fiddle
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css">
CSS
body { padding: 20px }
input.x-form-num-field { display: block; margin: 1em 0 }
JavaScript
Ext.require([
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.window.MessageBox',
'Ext.fx.target.Element'
]);
Ext.onReady(function(){
/*====================================================================
* Individual checkbox/radio examples
*====================================================================*/
// Using checkbox/radio groups will generally be more convenient and flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only have a single control at a time.
var individual = {
xtype: 'container',
layout: 'hbox',
margin: '0 0 10',
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Individual Checkboxes',
defaultType: 'checkbox', // each item will be a checkbox
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog',
inputValue: 'dog'
}, {
boxLabel: 'Cat',
name: 'fav-animal-cat',
inputValue: 'cat'
}, {
checked: true,
boxLabel: 'Monkey',
name: 'fav-animal-monkey',
inputValue: 'monkey'
}]
}, {
xtype: 'component',
width: 10
}, {
xtype: 'fieldset',
flex: 1,
title: 'Individual Radios',
defaultType: 'radio', // each item will be a radio button
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
...