title: Display issue with RowEditor and checkcolumn on ExtJS GridPanel
body: <p>I'm using an ExtJS (v3.4.0) GridPanel with the RowEditor extension to allow users to add lines of text to a grid. I have also used the checkcolumn extension so users can check certain lines of text for later processing. So far, it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/PTsBB.jpg" alt="My GridPanel"></p>
  
  <p>However, when editing a row, the problem at hand becomes apparent:</p>
  
  <p><img src="https://i.stack.imgur.com/cXR1U.jpg" alt="The display error"></p>
  
  <p>The value underlying the checkcolumn is being displayed in text form along with the actual checkbox. I figured since users can check the checkboxes without editing the row, I would make this column uneditable to fix my issue. However, after modifying my code the true/false value is still being displayed in edit mode, the text value is just not editable anymore.</p>
  
  <p>My code so far:</p>
  
  <pre><code>Ext.QuickTips.init();
  
      var FreeText = Ext.data.Record.create([{
          name: 'text',
          type: 'string'
      }, {
          name: 'active',
          type: 'bool'
      }]);
  
      var store = new Ext.data.GroupingStore({
          reader: new Ext.data.JsonReader({fields: FreeText}),
          sortInfo: {field: 'text', direction: 'ASC'}
      });
  
      var editor = new Ext.ux.grid.RowEditor({
          saveText: 'Update'
      });
  
      var freeTextPanel = new Ext.grid.GridPanel({
          store: store,
          width: 600,
          region:'center',
          margins: '0 5 5 5',
          autoExpandColumn: 'text',
          plugins: [editor],
          view: new Ext.grid.GroupingView({
              markDirty: false
          }),
          tbar: [{
              iconCls: 'icon-add',
              text: 'Add',
              handler: function(){
                  var e = new FreeText({
                      text: "",
                      active: true
                  });
                  editor.stopEditing();
                  store.insert(0, e);
                  freeTextPanel.getView().refresh();
                  freeTextPanel.getSelectionModel().selectRow(0);
                  editor.startEditing(0);
              }
          },{
              ref: '../removeBtn',
              iconCls: 'icon-delete',
              text: 'Delete',
              disabled: true,
              handler: function(){
                  editor.stopEditing();
                  var s = freeTextPanel.getSelectionModel().getSelections();
                  for(var i = 0, r; r = s[i]; i++){
                      store.remove(r);
                  }
              }
          }, {
              xtype: 'tbseparator'
          }, {
              iconCls: 'icon-excel-import',
              //text: 'Import from CSV',
              tooltip: 'Import CSV',
              handler: function() {
                  alert( "Excel import here!" );
              }
          }],
  
          columns: [
              {
                  xtype: 'checkcolumn',
                  header: 'Active',
                  dataIndex: 'active',
                  align: 'center',
                  width: 50
              }, {
                  id: 'text',
                  header: 'Free Text',
                  dataIndex: 'text',
                  width: 220,
                  sortable: true,
                  editor: {
                      xtype: 'textfield',
                      allowBlank: false
                  }
              }],
  
          isCellEditable: function(col, row) {
              var record = store.getAt(row);
              if (record.get('active')) {
                  return false;
              }
              return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
          }
      });
  
      var layout = new Ext.Panel({
          title: 'Free text entry',
          layout: 'border',
          layoutConfig: {
              columns: 1
          },
          width:600,
          height: 600,
          items: [freeTextPanel]
      });
      layout.render(Ext.getBody());
  
      freeTextPanel.getSelectionModel().on('selectionchange', function(sm){
          freeTextPanel.removeBtn.setDisabled(sm.getCount() &lt; 1);
      });
  </code></pre>
  
  <p>Is there an easy way to simply get rid of the true/false text when editing a row?</p>
  
  <p>Just in case, below are my RowEditor.js and CheckColumn.js files:</p>
  
  <p><strong>RowEditor.js</strong>
  <a href="http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740" rel="nofollow noreferrer">http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740</a></p>
  
  <p><strong>CheckColumn.js</strong>
  <a href="http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740" rel="nofollow noreferrer">http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740</a></p>