ExtJs 中的 CheckboxSelectionModel Grid：无法选择网格面板中的复选框，选择标题复选框时将检查所有行

Question

我的表单中有一个带有 CheckboxSelectionModel 的网格面板。我正在使用 ExtJs 3.4。这是我的网格面板。

var selectModel = new Ext.grid.CheckboxSelectionModel();

var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex,
            colIndex, store) {
        var refColor = record.data.tourTypeColor;
        //console.log(record);
        metaData.attr = 'style="background-color:' + refColor + ';"';
        return record.get('locationName');
    }
}, {
    header : "Town/City",
    sortable : true,
    dataIndex : 'city',
    width : 120
}, {
    header : "Address",
    sortable : true,
    dataIndex : 'addr',
    width : 170
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
} ]),
sm : new Ext.grid.CheckboxSelectionModel(),
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});

这个网格是使用 Json 从 postgresql 数据库加载的。

var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
    name : 'locationCode'
}, {
    name : 'locationName'
}, {
    name : 'city'
}, {
    name : 'addr'
}, {
    name : 'estimatedTime'
}, {
    name : 'tourTypeColor'
} ],
root : 'dropPickLoc',
idProperty : 'locationCode',
//autoDestroy : true,
autoLoad : true,

proxy : new Ext.data.HttpProxy({
    url : "http://" + host + ":" + port + "/" + projectName + "/"
            + "PendingDropPicks"

}),
reader : {
    type : 'json',
    root : 'dropPickLoc'
    //idProperty : 'locationName',
},
});

网格加载成功。问题是我无法选中网格中的复选框，但它可以通过单击标题复选框来选择所有行。为什么它不能单独检查每一行。

Answer 1

您必须在 columns 和 selModel 配置中使用相同的选择模型对象。在这里，您创建了两个不同的 Ext.grid.CheckboxSelectionModel 实例。

替换这一行：

sm: new Ext.grid.CheckboxSelectionModel(),

有了这个：

sm: selectModel,