由于 ExtJS 在做CheckboxSelectionModel的时候,没有考虑到会存在二级 三级等多级级联,导致目前存在做级联的时候,选择上级,往往会把下级 下下级选中,而实际上并没有被选中,只是视觉上view被选中了而已。项目中遇到此种情况,本来想改变界面原型的,单需求就这个样,改纠结了,一郁闷之下,将CheckboxSelectionModel的源代码做了修改,在使用的时候,需要将js和css一并引用:
js:
/* * Ext JS Library 2.0.0 * created by:raoyifeng * created at:2012-03-01 * licensing@extjs.com * */ Ext.grid.MyCheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { header: '<div class="x-grid3-hd-checker-my"> </div>', singleSelect:true, width: 20, sortable: false, menuDisabled:true, fixed:true, dataIndex: '', id: 'checker', initEvents : function(){ Ext.grid.MyCheckboxSelectionModel.superclass.initEvents.call(this); this.grid.on('render', function(){ var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); }, this); }, onMouseDown : function(e, t){ var hd = Ext.fly(t); if(e.button === 0 && hd.hasClass('x-grid3-row-checker-my')){ // Only fire if left-click e.stopEvent(); var row = e.getTarget('.x-grid3-row'); if(row){ var index = row.rowIndex; if(this.isSelected(index)){ this.deselectRow(index); }else{ this.selectRow(index, true); } } } var isChecked = hd.hasClass('x-grid3-row-checker-on-my'); if(isChecked){ hd.removeClass('x-grid3-row-checker-on-my'); }else{ hd.addClass('x-grid3-row-checker-on-my'); } }, onHdMouseDown : function(e, t){ if(t.className == 'x-grid3-hd-checker-my'){ e.stopEvent(); var hd = Ext.fly(t.parentNode); var parentNode=hd.parent().parent().parent().parent().parent().parent().parent().parent(); var hdP=Ext.fly(parentNode); var childs=hdP.query('.x-grid3-row-checker-my'); var isChecked = hd.hasClass('x-grid3-hd-checker-on-my'); if(isChecked){ hd.removeClass('x-grid3-hd-checker-on-my'); this.clearSelections(); if(childs!=null){ for(i=0;i<childs.length;i++){ Ext.fly(childs[i]).removeClass('x-grid3-row-checker-on-my'); } } }else{ hd.addClass('x-grid3-hd-checker-on-my'); this.selectAll(); if(childs!=null){ for(i=0;i<childs.length;i++){ Ext.fly(childs[i]).addClass('x-grid3-row-checker-on-my'); } } } } }, renderer : function(v, p, record){ return '<div class="x-grid3-row-checker-my"> </div>'; } });
.x-grid3-hd-row td,.x-grid3-row-my td,.x-grid3-summary-row td{font:normal 11px arial,tahoma,helvetica,sans-serif;-moz-outline:none;-moz-user-focus:normal;} .x-grid3-row-my td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;-moz-user-select:none;} .x-grid3-row-my .x-grid3-marker{padding:3px;} .x-grid3-row-my{cursor:default;border:1px solid #ededed;border-top-color:#fff;width:100%;} .x-grid3-row-checker-my,.x-grid3-hd-checker-my{width:100%;height:18px;background-position:2px 2px;background-repeat:no-repeat;background-color:transparent;background-image:url(images/row-check-sprite.gif);} .x-grid3-row-my .x-grid3-row-checker-my{background-position:2px 2px;} .x-grid3-row-selected-my .x-grid3-row-checker-my,.x-grid3-hd-checker-on-my .x-grid3-hd-checker-my{background-position:-23px 2px;} .x-grid3-hd-checker-my{background-position:2px 3px;} .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my,.x-grid3-row-checker-on-my{background-position:-23px 3px;} .x-grid3-row-checker-my, .x-grid3-hd-checker-my { width:100%; height:18px; background-position:2px 2px; background-repeat:no-repeat; background-color:transparent; background-image:url(images/row-check-sprite.gif); } .x-grid3-row-my .x-grid3-row-checker-my { background-position:2px 2px; } .x-grid3-row-selected-my .x-grid3-row-checker-my, .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my { background-position:-23px 2px; } .x-grid3-hd-checker-my { background-position:2px 3px; } .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my, .x-grid3-row-checker-on-my{ background-position:-23px 3px; } .x-grid3-hd-row-my td, .x-grid3-row-my-my td, .x-grid3-summary-row-my td{ font:normal 11px arial, tahoma, helvetica, sans-serif; -moz-outline: none; -moz-user-focus: normal; } .x-grid3-row-my td, .x-grid3-summary-row-my td { line-height:13px; vertical-align: top; padding-left:1px; padding-right:1px; -moz-user-select: none; } .x-grid3-row-my .x-grid3-marker-my { padding:3px; } .x-grid3-row-my { cursor: default; border:1px solid #ededed; border-top-color:#fff; /*border-bottom: 1px solid #ededed;*/ width:100%; } .x-grid3-row-checker-on-my{ background-position:-23px 3px; }
还不能将图片忘记了哈,附件为打包下载