ExtJs—Grid多选框中勾选与单击事件的冲突

问题描述：

因为使用了grid多选功能，在用户单击或者点击勾选框时将数据选中，但发现有一个问题：grid列表（多选）的单击动作与勾选动作冲突，单击时可以选中或者取消选中的数据，而通过点击勾选框来打钩选择或者取消选择失败了。

问题分析：

造成这个问题的原因是用户点击勾选框时，先后触发了单击动作以及勾选动作，这样一来触发单击动作时已经将该数据选中了，之后触发的勾选动作中逻辑判断是这样的：这条数据之前已经选中了，那么此次点击勾选框是将选中的这条数据取消选中状态。

         同理，若这条数据已经选中了，用户单击勾选框后，先触发的单击动作中将其取消选中状态，之后触发的勾选动作中又将数据选中了。

问题解决：

方法一：去掉勾选框即可，不过与用户显示的要求有出入。

方法二：保留勾选框，去掉单击动作，这样与用户操作方便的功能要求有出入，勾选框太小了，每次单击会比较麻烦。

方法三：保留勾选框，但将勾选框的作用范围缩到很小，这样虽然点击勾选框，但不会触发勾选动作，只有单击动作了。如下：

checkSelector:'.' + Ext.baseCSSPrefix + 'grid-row-checker',

改为

checkSelector:'.'+ Ext.baseCSSPrefix,

方法四：保留勾选框，去掉单击动作，然后扩大勾选框的作用范围，这个可以通过checkSelector的css来实现。

备注：

1、'Ext.selection.CheckboxModel'的checkSelector是选择器，用于确定该复选框元件是否被点击。它可以改变，让更大或者更小的区域被点击时生效。

2、    selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
checkSelector: '.'+Ext.baseCSSPrefix,
listeners: {
}
})