在实际项目中,我们常常遇到这样一个需求:在系统某个页面上,需要点击一个按钮,将树节点前面的复选框取消勾选,使节点恢复到未选中状态。这个操作看上去并不复杂,但查阅了网上不少资料,再对照官方API反复测试后,终于把实现逻辑理清了。下面直接给出具体代码方案。
需要注意的是,ExtJS 3.x 与 4.x 版本的处理方式有所不同。先来看 3.x 版本下的实现方法:
复制代码 代码如下:
node.attributes.checked=false; node.getUI().toggleCheck(false);
以上两行代码即可清除节点的选中状态,页面上的复选框也会同步取消勾选。
而在 ExtJS 4.x 版本中,API 发生了调整,对应的实现方式如下:
复制代码 代码如下:
node.raw.checked=false; node.set("checked",false);
同样能达到预期效果。需要特别注意的是,4.x 版本中原来的 attributes 属性已经变更为 raw,并且必须通过 set 方法来更新模型值,这样才能让 UI 层正确响应状态变化。
实践是检验真理的唯一标准,遇到问题不回避、不退缩,总能找到解决方案。正所谓宝剑锋从磨砺出,梅花香自苦寒来。
