解决exjtjs3.3中gridpanel中动态加载列时使用selModel无效的问题
创建GridPanel
1 _createGridPanel : function(){
2 var sm = new Ext.grid.CheckboxSelectionModel();
3 sm.handleMouseDown = Ext.emptyFn;
4 var Host = Ext.data.Record.create([
5 {name: 'isAgentOk', mapping: 'isAgentOk',type :'boolean'},
6 {name: 'ip', mapping: 'ip'}
7 ]);
8 var proxy = new Ext.data.PagingMemoryProxy(this.hosts.sort(function(a,b){
9 return a.isAgentOk===true ? 1 : -1;
10 }));
11 var reader = new Ext.data.JsonReader({
12 totalProperty: 'totalProperty',
13 root: 'rows'
14 },Host);
15 var store = new Ext.data.Store({
16 reader :reader,
17 proxy : proxy
18 });
19
20 var cm = new Ext.grid.ColumnModel({
21 defaults : {
22 sortable : false,
23 align : 'left',
24 menuDisabled : true
25 },
26 columns :[
27 sm,{
28 header : "agent状态",
29 dataIndex : 'isAgentOk',
30 renderer: function(value, metaData, record) {
31 metaData.css = "bold";
32 return value===true ? '正常' : '异常';
33 }
34 }, {
35 header : "JobIP",
36 dataIndex : 'ip',
37 renderer: function(value, metaData, record) {
38 metaData.css = "bold";
39 return value;
40 }
41 }]
42 });
43
44 var gridPanel = new Ext.grid.GridPanel({
45 id : this.id + '_HostGridPanel',
46 name : this.id + '_HostGridPanel',
47
48 headerCfg : {
49 tag : 'div',
50 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>',
51 style : 'font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:15px;transparent;border-bottom:1px solid #99BBE8;'
52 },
53 autoHeight : true,
54 autoScroll : true,
55 stripeRows : true,
56 loadMask : {
57 msg :'正在加载数据，请稍等…'
58 },
59 viewConfig : {
60 forceFit : true,
61 getRowClass : function(record, rowIndex, rp, ds){
62 var rowClass = '';
63 rowClass = record.data.isAgentOk !== true ? 'x-grid-row-ip-agent-fail' : '';
64 return rowClass;
65 }
66 },
67 sm : sm,
68 cm : cm,
69 store : store,
70 columnLines: true,
71 bbar: new Ext.PagingToolbar({
72 pageSize: this.pageSize,
73 store: store,
74 displayInfo: true,
75 beforePageText : '页',
76 afterPageText : '/ {0}',
77 displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
78 emptyMsg: "没有记录"
79 }),
80 buttonAlign: "center",
81 buttons: [{
82 text: "复制IP",
83 icon: "./images/add.gif",
84 ref : '../btnCopy',
85 scope: this,
86 value: 2
87 },{
88 text: "删除选中",
89 icon: "./images/set.jpg",
90 ref : '../btnDelete',
91 scope: this
92 },{
93 text: "清空",
94 icon: "./images/set.jpg",
95 ref : '../btnClear',
96 scope: this
97 },{
98 text: "刷新agent状态",
99 icon: "./images/set.jpg",
100 ref : '../btnRefreshAgnet',
101 scope: this
102 }]
103 });
104 return gridPanel;
105 }
动态列代码
1 _reconfigure : function(grid){
2 var cm = [];
3 var fields = [];
4 Ext.each(this.hosts,function(host){
5 if(!Ext.isObject(host.params)){
6 host.params = {};
7 }
8 });
9 //固定列
10 var sm = new Ext.grid.CheckboxSelectionModel({
11 handleMouseDown : Ext.emptyFn
12 });
13 cm = [
14 sm,
15 {header: "Agent状态", dataIndex: "isAgentOk", sortable: false,
16 renderer: function(value, metaData, record) {
17 metaData.css = "bold";
18 return value===true ? '正常' : '异常';
19 }
20 },
21 {header: "JobIP", dataIndex: "ip", sortable: false,
22 renderer: function(value, metaData, record) {
23 metaData.css = "bold";
24 return value;
25 }
26 }
27 ];
28 fields = [
29 {name: 'isAgentOk', mapping: 'isAgentOk',type :'boolean'},
30 {name: 'ip', mapping: 'ip'}
31 ];
32 //动态列
33 if(this.hosts.length>0){
34 var params = this.hosts[0].params;
35 if(Ext.isObject(params)){
36 for (var key in params) {
37 cm.push({
38 header: key,
39 sortable: false,
40 dataIndex: key
41 });
42 fields.push({
43 name : key,
44 mapping : 'params["' + key + '"]'
45 });
46 this.MAPPING_FIELDS.params = {};
47 this.MAPPING_FIELDS.params[key] = '';
48 }
49 }
50 }
51 var colModel = new Ext.grid.ColumnModel({
52 defaults : {
53 sortable : false,
54 align : 'left',
55 menuDisabled : true
56 },
57 columns : cm
58 });
59 var Host = Ext.data.Record.create(fields);
60 var proxy = new Ext.data.PagingMemoryProxy(this.hosts.sort(function(a,b){
61 return a.isAgentOk===true ? 1 : -1;
62 }));
63 var reader = new Ext.data.JsonReader({
64 totalProperty: 'totalProperty',
65 root: 'rows'
66 },Host);
67 var store = new Ext.data.Store({
68 reader :reader,
69 proxy : proxy
70 });
71 store.on('beforeload',this._onHostGridBeforeload,this);
72 grid.reconfigure(store,colModel);
73 grid.getBottomToolbar().bind(store);
74 store.load({params:{start : 0,limit : this.pageSize}});
75 }
当点击行的checkbox的时候，Firebug会报错
this.grid is undefined
1 isSelected : function(index){
2 var r = Ext.isNumber(index) ? this.grid.store.getAt(index) : index;
3 return (r && this.selections.key(r.id) ? true : false);
4 },
是上面这段代码报错，这段代码出自源码Ext.grid.RowSelectionModel文件
原因：是动态列代码中的第10行红色部分的CheckboxSelectionModel在动态列中没有绑定对应的grid
将上述代码修改成
1 var sm = new Ext.grid.CheckboxSelectionModel({
2 grid:grid,
3 handleMouseDown : Ext.emptyFn
4 });
以为这样就解决问题了，再次点击也可以选中行了，也没报错了。
但是在删除时，使用getSelections()方法返回的总是空数组，致使无法删除选中的记录。
在设置断点调试，发现各种相关的对象都能拿到，唯独没有选中的记录，百思不得其解，Google之，无果。
后仔细观察代码，总算找到原因了，其实很简单。
原因还是出在修改的代码上面，我原有的GridPanela已经设置了selModel，在动态列的代码中又new了一个CheckboxSelectionModel绑定在上面，当使用grid.getSelectionModel()拿到的引用还是原来的sm，而不是new出来的那个。（这里比较奇怪，没有覆盖掉原来的sm么？）
现在只能这样理解，反正问题解决了，只要拿到原有的selModel就行了。
将红色代码修改如下：
1 var sm = grid.getSelectionModel();
摘自 Kenn's notes
