extjs EditorGridPanel



ext版本2.1


系统中,大量用到了EditorGridPanel对grid的Cell进行编辑,如下图:

wKiom1LLpoGgvIiaAABzXy8OtsY755.jpg


EditorGridPanel原生的处理方式,对我们是不合适的:

1. 用户输入值验证不通过,单元格没有特殊的高亮标示,跟普通的field的处理方案不统一。

2. 单元格只有在点击编辑的情况下,才触发自定义的验证方法。

3. 对于非负数等的验证,是通过禁止'键/鼠'操作来实现的,对于单元测试是一个障碍。


我们的处理方案:

1. 对EditorGridPanel各个单元格(或者Record)添加标志位,标示是否验证通过。对于解决上述问题2的办法是:直接标志默认值为'不通过'。

2. 在单元格的validateEdit事件中,根据验证的结果设置对应的标志位,并且记录提示信息。

3. 重写GridView的doRender方法,检查各个单元格标志位。如果合格,则样式为'dirty';否则样式为'invalid',保留不合法值,并且render提示信息。

4. '保存'的时候直接检验各个标志位即可,无需重复复杂的逻辑判断。验证不通过的话,添加'invalid'样式。

5. 单元测试的话,也是检查各个标志位即可。


处理结果如下图:

wKioL1LNTMLgFEKpAACGJoobwyA957.jpg





你可能感兴趣的:(ExtJs,gridPanel,editor)