My checkboxes don't render as checkboxes

[bimargulies]

The following code sets up a form with nothing in it but a checkbox group.

Ext.define('WD40.view.Legend', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.wd40legend',
    layout: 'vbox',
    items: [
         {
            xtype: 'form',
            width: '100%',
            id: 'documentLanguageTable',
            title: "Language",
            items: [ {
                xtype: 'checkboxgroup',
                columns: 1,
                vertical: true,
                id: 'documentLanguageCheckboxes'
            }]
        }
    ]

Later, I add checkbox items with .add. Each checkbox item is rendered as a div with no checkbox element in it.

<div class="x-panel x-panel-default" id="lang-check-SPANISH" style="width: 169px; height: 2px; ">
  <div id="lang-check-SPANISH-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="width: 169px; left: 0px; top: 0px; height: 2px; ">
   <div id="lang-check-SPANISH-clearEl" class="x-clear" role="presentation">
  </div></div></div>

The code to add the items looks like:

langTable.add([
                    {   boxLabel  : langName + " (" + langData.count + ")",
                        name      : langName,
                        id        : 'lang-check-' + langName
                    }
                ]);

What do I need to do to actually get some checkboxes?

[bimargulies]

The code above added the checkboxes as siblings of the group, not children.