Display issue with RowEditor and checkcolumn on ExtJS GridPanel

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;
        }