Архив рубрики: ExtJS

Выделение связанной группы строк компонента Ext.grid.Panel

Недавно понадобилось выделить произвольную группу строк в элементе таблицы grid, решения сходу не нашлось. В основном предлагалось править css-свойства строк, что для меня показалось слишком сложным. Поясню точную задачу которая передо мной стояла: строки в таблице связаны между собой некоторым полем ID_Parent указывающим на поле ID_Operation, т.о. одна строка как бы порождает другую, затем эта другая следующую… При этом строки могут порождать несколько строк параллельно, создавая различные ветки.
Для того чтобы начать работу алгоритма нужно повесить обработчик событий click на таблицу

itemclick: {fn: function(self, record, item, index, e, opts) {}
}

Затем найдем корневую строку в этом списке

root = findRootOperation(record); с помощью функции описанной ниже
function findRootOperation(record) {
parent = store.find("ID_Operation", record.get("ID_Parent"));
  if (parent == -1)
    return record
  else
    return findRootOperation(store.data.getAt(parent))
}

Теперь можно получить весь список строк-детей в массив

var toHighLight = new Array();
function collectionRowIndexes(parent) {  rowIndex = store.find("ID_Operation", parent.get("ID_Operation"));
  toHighLight.push(rowIndex);
  var childIndex = store.find("ID_Parent", parent.get("ID_Operation"));
  while (childIndex != -1) {
    collectionRowIndexes(store.data.getAt(childIndex));
    // Ветки иногда распараллеливаются, поищем еще детей
     var childIndex = store.find("ID_Parent", parent.get("ID_Operation"), childIndex + 1);
  }
}

Все. Проходим по массиву и подсвечиваем нужные строки

for (var key in toHighLight) {  grid.getSelectionModel().select(toHighLight[key], new Boolean(true));
}
toHighLight = new Array();

Собственно все что написано — лишнее, суть только в строке grid.getSelectionModel().select(номер строки, не отчищать другие строки) + нужно не забыть сделать grid.getSelectionModel().setSelectionMode(«MULTI»); т.е. добавить возможность множественного выделения строк.

Последний код следует добавить в itemclick. В итоге получается вот так