在ExtJS GridPanel上显示RowEditor和checkcolumn的问题

我使用一个带有RowEditor扩展的ExtJS（v3.4.0）GridPanel，允许用户向网格中添加文本行。我还使用了checkcolumn扩展，这样用户就可以检查某些文本行，以便以后进行处理。到目前为止，看起来是这样的：

但是，编辑行时，眼前的问题变得很明显：

checkcolumn下面的值与实际复选框一起以文本形式显示。我想，因为用户可以在不编辑行的情况下选中复选框，所以我会使此列不可编辑以解决我的问题。但是，在修改代码后，真/假值仍在编辑模式下显示，文本值不再可编辑

到目前为止，我的代码是：

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

Ext.QuickTips.init（）；
var FreeText=Ext.data.Record.create([{
名称：“文本”，
键入：“字符串”
}, {
名称：'活动'，
类型：“bool”
}]);
var store=new Ext.data.GroupingStore({
reader:new Ext.data.JsonReader（{fields:FreeText}），
sortInfo:{字段：'text'，方向：'ASC'}
});
var editor=new Ext.ux.grid.rowdeditor({
保存文本：“更新”
});
var freeTextPanel=new Ext.grid.GridPanel({
店:店,，
宽度：600，
地区：'中心'，
边距：“0 5”，
自动展开列：“文本”，
插件：[编辑器]，
视图：新建Ext.grid.GroupingView({
markDirty:错
}),
待定：[{
iconCls:“图标添加”，
文本：“添加”，
处理程序：函数（）{
var e=新的自由文本({
正文：“，
主动：正确
});
停止编辑（）；
存储。插入（0，e）；
freeTextPanel.getView（）.refresh（）；
freeTextPanel.getSelectionModel（）.selectRow（0）；
编辑。开始编辑（0）；
}
},{
参考：“../removeBtn”，
iconCls:“图标删除”，
文本：“删除”，
残疾人:对,，
处理程序：函数（）{
停止编辑（）；
var s=freeTextPanel.getSelectionModel（）.getSelections（）；
对于（var i=0，r；r=s[i]；i++）{
储存。移除（r）；
}
}
}, {
xtype:'tbseparator'
}, {
iconCls:“图标excel导入”，
//文本：“从CSV导入”，
工具提示：“导入CSV”，
处理程序：函数（）{
警报（“此处导入Excel！”）；
}
}],
栏目：[
{
xtype:“检查列”，
标题：“活动”，
数据索引：“活动”，
对齐：'居中'，
宽度：50
}, {
id:'文本'，
标题：“自由文本”，
数据索引：“文本”，
宽度：220，
可排序：是的，
编辑:{
xtype:'textfield'，
allowBlank:false
}
}],
isCellEditable:函数（列、行）{
var记录=store.getAt（行）；
if（record.get（'active'））{
返回false；
}
返回Ext.grid.ColumnModel.prototype.isCellEditable.call（this，col，row）；
}
});
var布局=新的外部面板({
标题：“自由文本输入”，
布局：“边框”，
布局配置：{
栏目：1
},
宽度：600，
身高：600，
项目：[免费文本面板]
});
layout.render（Ext.getBody（））；
freeTextPanel.getSelectionModel（）.on（'selectionchange'，函数（sm）{
freeTextPanel.removeBtn.setDisabled（sm.getCount（）<1）；
});

在编辑行时，是否有一种简单的方法可以消除真/假文本

以防万一，下面是我的RowEditor.js和CheckColumn.js文件：

rowdeditor.js

检查column.js

---

结果证明我的问题的解决方法相当简单

在rowdeditor.js文件的startEditing方法中，我添加了以下代码。我隐式选中了项目名称，而不是复选框类型，以防以后其他复选框仍需要此功能：

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

for（var i=0，len=cm.getColumnCount（）；i