Extjs 3.4 复选框的,默认选中 ,禁用,(纯属于自己代码中需要,总结!)

     var sm = new Ext.grid.CheckboxSelectionModel( {         //一个特定的选择模型,它将渲染一列复选框,可以用来选择或反选多行数据。
               handleMouseDown : Ext.emptyFn,          //不响应MouseDown事件
               renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                  if(record.get('state')=='1'){              //判断条件
                       sm.selectRow(rowIndex,true);             //符合的行 进行默认勾选      下面还有一些参考
                       return '<div class="x-grid3-row-checker" >&#160;</div>';      //返回的是一个复选框
                  }else{
                       return '<div ><input type="checkbox" style="margin:-1 0 0 -2" disabled/></div>';    //把复选框禁用  (完全禁用,显示的是实体小正方形)
                  }
                },
                listeners:{         //listeners监听可以根据需求 写或不写                                                                                                 
                   beforerowselect:function(SelectionModel, rowIndex, keepExisting,record){
                       if(record.get('status')!='1' ){
                          return true;      //返回true 可以进行勾选操作
                       }else{
                         return false;     //禁止勾选, (显示没效果,只有鼠标点击时才知道狗选不上)
                       }
                   },
                  selectionchange:function(sms){       //当选中状态发生改变时触发
                      var row= sm.getSelections();       //返回所有选中记录
                     if(sms.hasSelection()){                 //返回 选中:true   取消选中:false 
                         if(arr!=""){            
                           arr="";            //每次选择之前判断一下    解决数据累加的情况
                      }
                        for(var i=0;i<row.length;i++){           //选中条数遍历
                           if(row[i].get('state')=='1'){
                            arr += row[i].get('userid')+",";     //逗号分隔    params传入后台遍历数据
                          }
                        }
                    }
                  }


                }
            });

renderer详解:

value:将要像是单元格里的值,即dataIndex的值

cellmeta:单元格的相关属性,主要是id和CSS

record:这行的数据对象。通过record.data['id']方式得到其他列的值

rowIndex:行号

columnIndex:当前列的行号

store:构造表格时传递的ds,也就是说,表格里所有的数据都可以通过store获得。

选中的状态:

  1. sm.selectAll();  
  2. sm.selectFirstRow();  
  3. sm.selectLastRow();  
  4. selectNext();  
  5. selectPrevious();  
  6. selectRange( Number startRow, Number endRow, [Boolean keepExisting] ) ;  
  7. selectRecords( Array records, [Boolean keepExisting] );  
  8. selectRow( Number row, [Boolean keepExisting] );

          未禁用                     禁用    

 

 全选状态

 

最终效果:

原文地址:https://www.cnblogs.com/shenpiao/p/5009224.html