我解决的问题是：在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);
}
})
});
