【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中

效果图1：



注：如图，要对 sm 为 CheckboxSelectionModel 类型的 grid 实现指定行锁住而不被选中，锁住的条件由该行的某一字段的数据决定，图中根据“状态”决定改行能否被选中。

实现方法（js中对这个 grid 的 sm 属性做配置）：

sm:new Ext.grid.CheckboxSelectionModel({

            checkOnly:true,

            listeners:{

                beforerowselect:function(sm,rowIndex,keepExisting,record){

                    if (record.data.status == "startCatalog"){

                        return false;

                    } else {

                        return true;

                    }

                }

            }

        }),

注：其实就是在选中一行数据之前进行监听，那么监听的这个事件就是伟大的神奇的 beforerowselect 

具体介绍如下图（api截图）：



---------------------------------------------------------------------  我是分割线  --------------------------------------------------------------------- 

接下来，我们对页面视觉效果做些优化。

效果图2：



注：如图，（要对 sm 为 CheckboxSelectionModel 类型的 grid 实现指定行锁住而不被选中，锁住的条件由该行的某一字段的数据决定，图中根据“状态”决定改行能否被选中。）锁住的行样式改变，并且 checkbox 消失。对了！屏蔽该行的一切点击事件。



实现方法（js中对这个 grid 的 viewConfig 属性做配置）：
viewConfig: {
forceFit: false,
getRowClass:function(record,index,rowParams,store){

                if (record.data.status == "startCatalog") {

                    return "getRowClassLock";

                }
}
},

（css 中 getRowClassLock ）：

.getRowClassLock {

    background-color: #f0f0f0;

    pointer-events: none;

    padding-left: 20px;

    color: #999;

}

.getRowClassLock .x-grid3-td-checker {

    display: none;

}

注：1、其实就是实现对表格指定行添加一个样式，那么这个的实现只需要用表格的 viewConfig这个属性进行操作即可，具体的操作方法可见api（下方截图）。

2、然后就是这个样式类（getRowClassLock）的实现，关键用到： pointer-events: none; 屏蔽鼠标点击事件 （详见 pointer-events: none——CSS实现禁用鼠标点击事件！巧妙解决ExtJs表格单行禁用功能！）；然后就是对该类下面的 checkbox
进行 display: none;  隐藏对象。