Display issue with RowEditor and checkcolumn on ExtJS GridPanel - extjs

Question

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:
However, when editing a row, the problem at hand becomes apparent:
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.
My code so far:
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() < 1);
});
Is there an easy way to simply get rid of the true/false text when editing a row?
Just in case, below are my RowEditor.js and CheckColumn.js files:
RowEditor.js
http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740
CheckColumn.js
http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740

Answer 1

Turns out the solution to my problem was rather simple.
In the startEditing method of the RowEditor.js file I added the following code. I checked implicitly on the name of my item instead of for the checkbox type, in case I still need this functionality for other checkboxes later on:
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
if( cm.getDataIndex(i) == 'active' ) {
val = "";
}
f = fields[i];
f.setValue(val);
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}