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

Question

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

但是，在编辑行时，手头的问题变得明显：

checkcolumn底层的值将以文本形式与实际复选框一起显示。我想，既然用户可以在不编辑行的情况下查看复选框，我会将此列无法修复我的问题。但是，在修改我的代码后，仍然在编辑模式下显示true / false值，文本值不再可编辑。

到目前为止我的代码：

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

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

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

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

原来我解决问题的方法很简单。

在RowEditor.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;
        }