有关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);

}

})

});