问题描述:
因为使用了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: {
}
})