Rendering a "normal" checkbox with ext.js 4

I'm trying to do something, i think, that should be relatively simple with EXT.js 4, but I can not find an answer. I'm trying to create a checkbox with a type of "checkbox" currently when I try it renders it as a type="button"

here is a sample of what I'm doing (I belive this code comes from Sencha itself, but it is what I am trying to do)

THIS CODE

Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width      : 300,
title      : 'Pizza Order',
items: [
    {
        xtype      : 'fieldcontainer',
        fieldLabel : 'Toppings',
        defaultType: 'checkboxfield',
        items: [
            {
                boxLabel  : 'Anchovies',
                name      : 'topping',
                inputValue: '1',
                id        : 'checkbox1'
            }, {
                boxLabel  : 'Artichoke Hearts',
                name      : 'topping',
                inputValue: '2',
                checked   : true,
                id        : 'checkbox2'
            }, {
                boxLabel  : 'Bacon',
                name      : 'topping',
                inputValue: '3',
                id        : 'checkbox3'
            }
        ]
    }
],
bbar: [
    {
        text: 'Select Bacon',
        handler: function() {
            var checkbox = Ext.getCmp('checkbox3');
            checkbox.setValue(true);
        }
    },
    '-',
    {
        text: 'Select All',
        handler: function() {
            var checkbox1 = Ext.getCmp('checkbox1'),
                checkbox2 = Ext.getCmp('checkbox2'),
                checkbox3 = Ext.getCmp('checkbox3');

            checkbox1.setValue(true);
            checkbox2.setValue(true);
            checkbox3.setValue(true);
        }
    },
    {
        text: 'Deselect All',
        handler: function() {
            var checkbox1 = Ext.getCmp('checkbox1'),
                checkbox2 = Ext.getCmp('checkbox2'),
                checkbox3 = Ext.getCmp('checkbox3');

            checkbox1.setValue(false);
            checkbox2.setValue(false);
            checkbox3.setValue(false);
        }
    }
],
renderTo: Ext.getBody()

});

RENDERS

<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">

Notice the type="button"? I nee the type to be a "checkbox"

Let me include the reason, maybe I am approaching this wrong. I am trying to make JAWS reader read the checkbox the way it should. As a type "button" JAWS reader reads it like a button and dose not read the that goes with the check box.

Hope this makes since, please ask any question you need to and thanks for any help.

Ross