ExtJS 中具有相同父容器的多个元素的并发效果

Question

我有一个带有关联的 RowSelectionModel 和 GridView 的 ExtJS GridPanel。当用户选择某些行并单击“开始”时，我希望所有选定的行都闪烁几次。

目前，我正在做类似的事情：

selModel.each(function (record) {

  var doEffect = function (effect, row, color, count, classToToggle) {

     var effectCallback = function (count, max) {
        if (count < max) {
            return (function () { row[effect](color); });
        }
        else {
           return (function () { row.addClass(classToToggle); });
        }
      };

      row.removeClass(classToToggle);
      for (var i = 1; i <= count; i++) {
         row[effect](color, { callback: effectCallback(i, count) });
       }
  };


  // highlight selected rows
  var row = Ext.get(grid.getView().getRow(grid.store.indexOf(record)));

  // essentially calling row.highlight() 3 times 
  doEffect('highlight', row, 'f8f7d6', 3, 'x-grid3-row-selected');  
}

问题是，随着所选行数的增加，视觉效果不再同时发生。我知道您可以在效果配置中指定并发，导致该元素排队的所有效果同时发生，但因为所有行都是不同的元素，所以这不太有效。

如果我能够以某种方式在父容器上指定并发，以便在最后一个选定的行准备好之前不会发生动画，那就太棒了。

有人遇到过这种事情吗？

Answer 1

您依次为每一行设置回调（计时器），因此它们可能会在不同时间触发。
尝试设置一个计时器并立即对所有选定的行进行更改。

也就是说，从外部删除 selModel.each() 循环，并使 doEffect 和effectCallback 获取行集合（或查询 selModel 本身）以在每次调用时进行更改。

它也会运行得更快（即消耗更少的周期），因为您一次只会运行一个计时器。