所谓说要完善CheckboxSelectionModel功能,其它是实现每行的CheckBox可以触发全选或者去全选。
说白了,就是当我们选中表中一行时,如果所有行都已经选中,那么头部的全选框会自动化选上,而如果表格全选中,把
其中一行去掉选择,而头部的全选框会自动去全选。
代码如下:
Ext.override(Ext.grid.CheckboxSelectionModel,{ onMouseDown : function(e, t){ if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click e.stopEvent(); var row = e.getTarget('.x-grid3-row'); // mouseHandled flag check for a duplicate selection (handleMouseDown) call if(!this.mouseHandled && row){ //alert(this.grid.store.getCount()); var gridEl = this.grid.getEl();//得到表格的EL对象 var hd = gridEl.select('div.x-grid3-hd-checker');//得到表格头部的全选CheckBox框 var index = row.rowIndex; if(this.isSelected(index)){ this.deselectRow(index); var isChecked = hd.hasClass('x-grid3-hd-checker-on'); //判断头部的全选CheckBox框是否选中,如果是,则删除 if(isChecked){ hd.removeClass('x-grid3-hd-checker-on'); } }else{ this.selectRow(index, true); //判断选中当前行时,是否所有的行都已经选中,如果是,则把头部的全选CheckBox框选中 if(gridEl.select('div.x-grid3-row-selected').elements.length==gridEl.select('div.x-grid3-row').elements.length){ hd.addClass('x-grid3-hd-checker-on'); }; } } } this.mouseHandled = false; }, onHdMouseDown : function(e, t){ /** *大家觉得上面重写的代码应该已经实现了这个功能了,可是又发现下面这行也重写了 *由原来的t.className修改为t.className.split(' ')[0] *为什么呢?这个是我在快速点击头部全选CheckBox时, *操作过程发现,有的时候x-grid3-hd-checker-on这个样式还没有删除或者多一个空格,结果导致下面这个判断不成立 *去全选或者全选不能实现 */ if(t.className.split(' ')[0] == 'x-grid3-hd-checker'){ e.stopEvent(); var hd = Ext.fly(t.parentNode); var isChecked = hd.hasClass('x-grid3-hd-checker-on'); if(isChecked){ hd.removeClass('x-grid3-hd-checker-on'); this.clearSelections(); }else{ hd.addClass('x-grid3-hd-checker-on'); this.selectAll(); } } } });