转:Ext GridPanel根据条件显示复选框
Ext GridPanel实现复选框选择框:
var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false });
但是这样每一行都会有复选框,如果需求为:某行数据的某个列满足什么条件我才有复选框选项就不太好实现了,
这样就需要重写Ext.grid.CheckboxSelectionModel的渲染,行点击涵数来实现.
1 var selectModel = new Ext.grid.CheckboxSelectionModel({ 2 singleSelect : false, 3 renderer : function(v, p, record){ 4 if (record.data['结果状态'] == '0'){ 5 return ''; 6 } 7 return '<div class="x-grid3-row-checker"> </div>'; 8 }, 9 onHdMouseDown : function(e, t) { 10 if (t.className == 'x-grid3-hd-checker') { 11 e.stopEvent(); 12 var hd = Ext.fly(t.parentNode); 13 var isChecked = hd.hasClass('x-grid3-hd-checker-on'); 14 if (isChecked){ 15 hd.removeClass('x-grid3-hd-checker-on'); 16 this.clearSelections(); 17 }else { 18 hd.addClass('x-grid3-hd-checker-on'); 19 if (this.locked){ 20 return; 21 } 22 this.selections.clear(); 23 for (var i = 0, len = this.grid.store.getCount(); i < len; i++ ){ 24 if (this.grid.store.getAt(i).data["结果状态"] != '0'){ 25 this.selectRow(i, true); 26 } 27 } 28 } 29 } 30 }, 31 handleMouseDown : function(g, rowIndex, e){ 32 if (e.button !== 0 || this.isLocked()) { 33 return; 34 } 35 var view = this.grid.getView(); 36 if (e.shiftKey && !this.singleSelect && this.last != false ) { 37 var last = this.last; 38 this.selectRange(last, rowIndex, e.ctrlKey); 39 this.last = last; 40 view.focusRow(rowIndex); 41 }else{ 42 var isSelected = this.isSelected(rowIndex); 43 if (e.ctrlKey && isSelected) { 44 this.deselectRow(rowIndex); 45 }else if(!isSelected || this.getCount() > 1){ 46 if(this.grid.store.getAt(rowIndex).data["结果状态"] != '0'){ 47 this.selectRow(rowIndex, e.ctrlKey || e.shiftKey); 48 } 49 view.focusRow(rowIndex); 50 } 51 } 52 } 53 });
原文:
http://fordream.iteye.com/blog/1179252