解决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之，无果。
后仔细观察代码，总算找到原因了，其实很简单。
原因还是出在修改的代码上面，我原有的GridPanel已经设置了selModel，在动态列的代码中又new了一个CheckboxSelectionModel绑定在上面，当使用grid.getSelectionModel()拿到的引用还是原来的sm，而不是new出来的那个。（这里比较奇怪，没有覆盖掉原来的sm么？）
现在只能这样理解，反正问题解决了，只要拿到原有的selModel就行了。
将红色代码修改如下：
1 var sm = grid.getSelectionModel();
