有关GridPanel中的CheckboxSelectionModel(Extjs)

看到前人写的代码有不爽之处，不过改起来还真不知道从何下手，研究了一阵子，总算是搞定了。。。

我解决的问题是：在gridpanel左侧有一列checkbox，gridpanel右侧有一个图片区，每一行对应一个不同的图片。前人想偷懒，在有多行选择的时候，右侧只显示最上面一行的图片。。显然不太给力啊。。。。而且还有效率问题，当点击gridpanel标题行的全选checkbox时，右侧的信息会不停地变啊变，如果每页显示500条数据，要等好久。。。

我的目标是选择不同行的时候，右侧都显示出对应的图片。而且，全选与全不选的时候，效率还很高。。。。

开始的思路是重写表头的全选checkbox点击事件，找了好久，没找到方法。。。后来无意间看到了另一种思路，那就是对cell的click事件进行操作：

checkBox = new Ext.grid.CheckboxSelectionModel();
//checkBox.handleMouseDown = Ext.emptyFn;  

///这个方法是屏蔽用户对checkbox以外的列的点击事件。因为如果已经选了2行，但对另一行点击时，前两行的选择会被取消。

 

///对于表头的checkbox不会进此事件

vehiclePassInfoGrid.on('cellclick', function(grid, rowIndex,columnIndex,event){
var rowArray = vehiclePassInfoGrid.getSelectionModel().getSelections();
if(rowArray.length == 0){
document.getElementById("ExportBtn").disabled = true;
}else{
document.getElementById("ExportBtn").disabled = false;
}  ///这是对导出按钮的控制，只有有选择数据时，此按钮才可使用。

if (rowIndex >= 0)//判断表格的行的选中状态   
{
if (checkBox.isSelected(rowIndex)) {
//alert(rowIndex);
m_selectRecord = vehiclePassInfoStore.getAt(rowIndex);
m_iFtpIndex = vehiclePassInfoStore.indexOf(m_selectRecord);
///相应操作1
}else{
m_selectRecord = null ;
///相应操作2
}
}else{
//none
}
});

//////由于全选不会进入cellclick事件，所以，导出按钮 要对它进行单独监控
vehiclePassInfoGrid.selModel.on('selectionchange', function(selModel) {
var rowArray = vehiclePassInfoGrid.getSelectionModel().getSelections();
if(rowArray.length.length == 0){
document.getElementById("ExportBtn").disabled = true;
}else{
document.getElementById("ExportBtn").disabled = false;
}
});

       

PS：再补充点我做此功能之前收集到的一点代码，当然后来都没怎么用。

1.

var sm = new Ext.grid.CheckboxSelectionModel(); 
sm.handleMouseDown = Ext.emptyFn;//不响应MouseDown事件 
sm.on('rowselect',function(sm_,rowIndex,record){//行选中的时候 

2.

var hd_checker = vehiclePassInfoGrid.getEl().select('div.x-grid3-hd-checker');
var hd = hd_checker.first();

//判断是否是全选/取消全选 
//var record = rowArray[0];
if(hd!=null ){
if(hd.hasClass('x-grid3-hd-checker-on')){
//hd.removeClass('x-grid3-hd-checker-on');
//alert("aaa");
}else if(hd.hasClass('x-grid3-hd-checker-off')){
//alert("bbb");
}
}

3.

我相信大家都用过checkboxSelectionModel.只要点击某一行.无论任点击任何列.它都要被选中.现在我的情况就是.点了全选.如果再点击某一行.所有行都被取消了选中状态.只有那一行被选中.现在我只想实现点击复选框才有效果.点其它列无效.
我的解决方法：
var sm_item = new Ext.grid.CheckboxSelectionModel();
sm_item.handleMouseDown = Ext.emptyFn; 让sm_item的handleMouseDown失效，这是参照一个陌生大哥的博客上面的，在次谢谢他
selectUserPanel.on(cellclick, function(grid, rowIndex,columnIndex,event) {这是表格的列点击事件
    if (columnIndex != 0) {
if (sm_item.isSelected(rowIndex))判断表格的行的选中状态
            sm_item.deselectRow(rowIndex);设置CheckboxSelectionModel的选中行的状态
        else
sm_item.selectRow(rowIndex, true);
}
})

        }, this); 
        sm.on('rowdeselect',function(sm_,rowIndex,record){//行未选中的时候 
            
        }, this); 

4.

在一个表格中使用CheckboxSelectionModel选择模型实现多行选择，但是其中有些行是不能被选择的，怎样让指定的行的checkbox不能被选择
Ext.override(Ext.grid.RowSelectionModel, {
    selectRow: function(index, keepExisting, preventViewNotify) {
        if (this.isLocked() || (index < 0 || index >= this.grid.store.getCount()) || (keepExisting && this.isSelected(index)) || (Number(this.grid.store.getAt(index).get("EditFlag")) === 0)) {//根据每行的一个标识字段来判断是否选中
            return;
        }
        var r = this.grid.store.getAt(index);
        if (r && this.fireEvent('beforerowselect', this, index, keepExisting, r) !== false) {
            if (!keepExisting || this.singleSelect) {
                this.clearSelections();
            }
            this.selections.add(r);
            this.last = this.lastActive = index;
            if (!preventViewNotify) {
                this.grid.getView().onRowSelect(index);
            }
            this.fireEvent('rowselect', this, index, r);
            this.fireEvent('selectionchange', this);
        }


    }
});


//在record 中添加一个标识字段就可以了。我项目中的代码




你在sotre里加一个selected列，如果要选中在后台把它设置用true

{deptname:'aa',carkindsname:'bb',selected:true}

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm, {
align : 'center',
header : "车属单位",
dataIndex : "deptname",
renderer : ZeroorNull
}, {
align : 'center',
header : "车种名",
dataIndex : "carkindsname",
renderer : ZeroorNull
}])
grid.store.on('load', function(store, records, options) {
sm.clearSelections();
Ext.each(records, function(rec) {
if (rec.get('selected')) {
sm.selectRow(grid.store.indexOfId(id),
true);
}
})
});