解决exjtjs3.3中gridpanel中动态加载列时使用selModel无效的问题

创建GridPanel

_createGridPanel : function(){
var sm = new Ext.grid.CheckboxSelectionModel();
sm.handleMouseDown = Ext.emptyFn;
var Host = Ext.data.Record.create([
{name: 'isAgentOk', mapping: 'isAgentOk',type :'boolean'},
{name: 'ip', mapping: 'ip'}
]);
var proxy = new Ext.data.PagingMemoryProxy(this.hosts.sort(function(a,b){
return a.isAgentOk===true ? 1 : -1;
}));
var reader = new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'rows'
},Host);
var store = new Ext.data.Store({
reader :reader,
proxy : proxy
});

var cm = new Ext.grid.ColumnModel({
defaults : {
sortable : false,
align : 'left',
menuDisabled : true
},
columns :[
sm,{
header : "agent状态",
dataIndex : 'isAgentOk',
renderer: function(value, metaData, record) {
metaData.css = "bold";
return value===true ? '正常' : '异常';
}
}, {
header : "JobIP",
dataIndex : 'ip',
renderer: function(value, metaData, record) {
metaData.css = "bold";
return value;
}
}]
});

var gridPanel = new Ext.grid.GridPanel({
id : this.id + '_HostGridPanel',
name : this.id + '_HostGridPanel',

headerCfg : {
tag : 'div',
html : '<span id="'+this.id+'_spanIPInfo">本次导入[<label style="color:#FF0000;"> 0 </label>]个IP, 共计导入[<label style="color:#FF0000;"> 0 </label>]个IP;agent检测状态异常的IP数量共计[<label style="color:#FF0000;"> 0 </label>];</span>',
style : 'font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:15px;transparent;border-bottom:1px solid #99BBE8;'
},
autoHeight : true,
autoScroll : true,
stripeRows : true,
loadMask : {
msg :'正在加载数据，请稍等…'
},
viewConfig : {
forceFit : true,
getRowClass : function(record, rowIndex, rp, ds){
var rowClass = '';
rowClass = record.data.isAgentOk !== true ? 'x-grid-row-ip-agent-fail' : '';
return rowClass;
}
},
sm : sm,
cm : cm,
store : store,
columnLines: true,
bbar: new Ext.PagingToolbar({
pageSize: this.pageSize,
store: store,
displayInfo: true,
beforePageText : '页',
afterPageText : '/ {0}',
displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
emptyMsg: "没有记录"
}),
buttonAlign: "center",
buttons: [{
text: "复制IP",
icon: "./images/add.gif",
ref : '../btnCopy',
scope: this,
value: 2
},{
text: "删除选中",
icon: "./images/set.jpg",
ref : '../btnDelete',
scope: this
},{
text: "清空",
icon: "./images/set.jpg",
ref : '../btnClear',
scope: this
},{
text: "刷新agent状态",
icon: "./images/set.jpg",
ref : '../btnRefreshAgnet',
scope: this
}]
});
return gridPanel;
}

动态列代码

_reconfigure : function(grid){
var cm = [];
var fields = [];
Ext.each(this.hosts,function(host){
if(!Ext.isObject(host.params)){
host.params = {};
}
});
//固定列
10         var sm = new Ext.grid.CheckboxSelectionModel({
11             handleMouseDown : Ext.emptyFn
12         });
cm = [
sm,
{header: "Agent状态", dataIndex: "isAgentOk", sortable: false,
renderer: function(value, metaData, record) {
metaData.css = "bold";
return value===true ? '正常' : '异常';
}
},
{header: "JobIP", dataIndex: "ip", sortable: false,
renderer: function(value, metaData, record) {
metaData.css = "bold";
return value;
}
}
];
fields = [
{name: 'isAgentOk', mapping: 'isAgentOk',type :'boolean'},
{name: 'ip', mapping: 'ip'}
];
//动态列
if(this.hosts.length>0){
var params = this.hosts[0].params;
if(Ext.isObject(params)){
for (var key in params) {
cm.push({
header: key,
sortable: false,
dataIndex: key
});
fields.push({
name : key,
mapping : 'params["' + key + '"]'
});
this.MAPPING_FIELDS.params = {};
this.MAPPING_FIELDS.params[key] = '';
}
}
}
var colModel = new Ext.grid.ColumnModel({
defaults : {
sortable : false,
align : 'left',
menuDisabled : true
},
columns : cm
});
var Host = Ext.data.Record.create(fields);
var proxy = new Ext.data.PagingMemoryProxy(this.hosts.sort(function(a,b){
return a.isAgentOk===true ? 1 : -1;
}));
var reader = new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'rows'
},Host);
var store = new Ext.data.Store({
reader :reader,
proxy : proxy
});
store.on('beforeload',this._onHostGridBeforeload,this);
grid.reconfigure(store,colModel);
grid.getBottomToolbar().bind(store);
store.load({params:{start : 0,limit : this.pageSize}});
}

当点击行的checkbox的时候，Firebug会报错

this.grid is undefined

isSelected : function(index){
var r = Ext.isNumber(index) ? this.grid.store.getAt(index) : index;
return (r && this.selections.key(r.id) ? true : false);
},

是上面这段代码报错，这段代码出自源码Ext.grid.RowSelectionModel文件

原因：是动态列代码中的第10行红色部分的CheckboxSelectionModel在动态列中没有绑定对应的grid

将上述代码修改成

var sm = new Ext.grid.CheckboxSelectionModel({
grid:grid,
handleMouseDown : Ext.emptyFn
});

以为这样就解决问题了，再次点击也可以选中行了，也没报错了。

但是在删除时，使用getSelections()方法返回的总是空数组，致使无法删除选中的记录。

在设置断点调试，发现各种相关的对象都能拿到，唯独没有选中的记录，百思不得其解，Google之，无果。

后仔细观察代码，总算找到原因了，其实很简单。

原因还是出在修改的代码上面，我原有的GridPanel已经设置了selModel，在动态列的代码中又new了一个CheckboxSelectionModel绑定在上面，当使用grid.getSelectionModel()拿到的引用还是原来的sm，而不是new出来的那个。[b]（这里比较奇怪，没有覆盖掉原来的sm么？）[/b]

现在只能这样理解，反正问题解决了，只要拿到原有的selModel就行了。

将红色代码修改如下：

var sm = grid.getSelectionModel();