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 }

JavaScript

Ext.onReady(function() {
		Ext.MessageBox("Test Message");
    var form = new Ext.form.FormPanel({
        renderTo: Ext.getBody(),
        frame: true,
        title: 'Test panel',
        height: 250,
        items: [{
            xtype: 'radio',
            fieldLabel: 'Employment Type',
            boxLabel: 'Documented',
            name: 'employment_type',
            checked: true,
            inputValue: 'documented'
        },{
            xtype: 'radio',
            boxLabel: 'Contracted',
            name: 'employment_type',
            inputValue: 'contracted'
        }],
        buttons: [{
            text: 'submit',
            handler: function(){
                console.log(form.getForm().getValues());
            }
        }]
    });

});