extjs EditorGridPanel

ext版本2.1

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

EditorGridPanel原生的处理方式，对我们是不合适的：

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

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

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

我们的处理方案：

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

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

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

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

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

处理结果如下图：

转载于:https://blog.51cto.com/wangyuelucky/1349444