title: Why doesn't this checkbox column work in this ExtJS grid?
body: <p>The following ExtJS grid worked until I put the checkbox column in it, now I get this error:</p>
  
  <p><img src="https://i.stack.imgur.com/bhuWZ.png" alt="Cls error"></p>
  
  <p>I based the checkbox column code on <a href="http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.js" rel="nofollow noreferrer">this code</a>.</p>
  
  <p><strong>What do I need to do to get the checkbox column to work?</strong></p>
  
  <pre><code>var myData = [
      [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
      [16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
      [5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
      [1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
      [12, 'Other', 0.42, false, '2010-11-04 08:31:12']
  ];
  
  var myReader = new Ext.data.ArrayReader({}, [{
          name: 'id',
          type: 'int'
      }, {
          name: 'object',
          type: 'object'
      }, {
          name: 'status',
          type: 'float'
      }, {
          name: 'rank',
          type: 'boolean'
      }, {
          name: 'lastChange',
          type: 'date',
          dateFormat: 'Y-m-d H:i:s'
      }]);
  
  var grid = new Ext.grid.GridPanel({
      region: 'center',
      style: 'margin: 10px',
      store: new Ext.data.Store({
          data: myData,
          reader: myReader
      }),
      columns: [{
              header: 'ID',
              width: 50,
              sortable: true,
              dataIndex: 'id',
              hidden: false
          },
          {
              header: 'Object',
              width: 120,
              sortable: true,
              dataIndex: 'object',
              renderer: columnWrap
  
          }, {
              header: 'Status',
              width: 90,
              sortable: true,
              dataIndex: 'status'
          },
          {
              xtype: 'checkcolumn',
              header: 'Test',
              dataIndex: 'rank',
              width: 55
          },
          {
              header: 'Last Updated',
              width: 120,
              sortable: true,
              renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
              dataIndex: 'lastChange'
          }],
      viewConfig: {
          forceFit: true,
          getRowClass: function(record, rowIndex, rp, ds){
              if(rowIndex == 2){
                  return 'red-row';
              } else {
                  return '';
              }
          }
  
      },
      title: 'Computer Information',
      width: 500,
      autoHeight: true,
      frame: true,
      listeners: {
          'rowdblclick': function(grid, index, rec){
              var id = grid.getSelectionModel().getSelected().json[0];
              go_to_page('edit_item', 'id=' + id);
          }
      }
  });
  </code></pre>