Extjs 4.2 grid Checkbox column not rendering checked when data from store is true

I have a data grid using Extjs 4.2 that has a checkbox coulmn with a data index = inactive. How can I get the checkbox to render as checked

Here is my data grid: { xtype: 'panel', title: 'Pricing', items: [ { xtype: 'gridpanel', height: 900, id: 'costGrid', title: 'Pricing', columnLines: true, store: 'CostStore', columns: [ { xtype: 'gridcolumn', hidden: true, dataIndex: 'id', text: 'Id' }, { xtype: 'gridcolumn', align: 'center', dataIndex: 'product', text: 'Product' }, { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { return '<img src="' + '../' + value + '"width="100" height="100">' + "\n\r" + ' ' + record.data.description + ''; }, width: 371, align: 'center', dataIndex: 'imgSrc', text: 'ImgSrc' }, { xtype: 'gridcolumn', hidden: true, width: 272, dataIndex: 'description', text: 'Description' }, { xtype: 'gridcolumn', width: 154, align: 'center', dataIndex: 'resource', text: 'Resource' }, { xtype: 'gridcolumn', width: 88, align: 'center', dataIndex: 'cost', text: 'Cost', editor: { xtype: 'numberfield', selectOnFocus: true, allowExponential: false } }, { xtype: 'numbercolumn', width: 79, align: 'center', dataIndex: 'mfgCost', text: 'Mfg Cost', editor: { xtype: 'numberfield' } }, { xtype: 'numbercolumn', align: 'center', dataIndex: 'multiplier', text: 'Multiplier', editor: { xtype: 'numberfield' } }, { xtype: 'numbercolumn', align: 'center', dataIndex: 'flatRate', text: 'Flat Rate', editor: { xtype: 'numberfield' } }, { xtype: 'checkcolumn', dataIndex: 'inactive', text: 'Inactive', editor: { xtype: 'checkboxfield' } } ], plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { pluginId: 'costPlugin', clicksToEdit: 1, listeners: { validateedit: { fn: me.onRowEditingValidateedit, scope: me } } }) ], dockedItems: [ { xtype: 'toolbar', dock: 'top', height: 79, width: 776, items: [ { xtype: 'combobox', id: 'productCombo', itemId: 'productCombo', padding: '10 10 10 10', fieldLabel: 'Product', labelWidth: 40, emptyText: '', editable: false, displayField: 'product', store: 'ProductStore', valueField: 'product', listeners: { change: { fn: me.onComboboxChange, scope: me } } }, { xtype: 'combobox', id: 'resourceCombo', itemId: 'resourceCombo', fieldLabel: 'Resource', labelWidth: 50, emptyText: '', editable: false, displayField: 'resource', store: 'ResourceStore', valueField: 'resource', listeners: { change: { fn: me.onResourceComboChange, scope: me } } }, { xtype: 'checkboxfield', padding: 20, width: 200, labelAlign: 'right', boxLabel: 'Check/Uncheck All', boxLabelAlign: 'before', listeners: { change: { fn: me.onCheckboxfieldChange, scope: me } } } ] } ], selModel: Ext.create('Ext.selection.CheckboxModel', { mode: 'SINGLE', showHeaderCheckbox: false }) } ] }

Here is the response from the store get request

[{"id":"1","product":"Casket","imgSrc":"./files/parag/thumb/Princeton_cjb_tn.jpg","description":"Princeton Solid Mahogany","resource":"Paragon","cost":"19500.00","mfgCost":"13000.00","multiplier":"1.50","flatRate":null,"inactive":"1"},

I tried an event change on the checkbox to no avail. Please if someone can send me down the right path I would greatly appreciate it.