понедельник, 11 апреля 2011 г.

ExtJS выделить строку в таблице grid

Проблема: выделить одну строку (например, первую) в таблице grid сразу после ее загрузки. Казалось бы, проблемы как таковой здесь нет - получили SelectionModel таблицы и сделали selectRow(rowIndex). По сути - все действительно так, однако необходимо выбрать нужный момент для выполнения этого кода. Попробуйте, например, выделить строку в событии afterrender или render - увы, выделение не сработает. Решение, тем не менее, безусловно есть.

Решение: необходимо воспользоваться событием viewready, возникающим, когда таблица grid полностью отрисована на странице и готова к манипуляциям. Как гласит документация, viewready используется как раз для осуществления выделения строки по умолчанию.

Предположим, что нам нужно выделить первую строку таблицы:

grid = new Ext.grid.EditorGridPanel({
  store: myStore,
  height: 500,
  border: false, frame: false,
  cm: myColumnModel,
  selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
  listeners: {
    viewready: function(g){
      g.getSelectionModel().selectRow(0);
    }
  }

Обратите внимание, что в случае необходимости использования так называемой модели выделений SelectionModel необходимо явно указывать selModel в конфигурации таблицы, в противном случае вызов метода grid.getSelectionModel() вызовет ошибку.

1 комментарий:

  1. Друг, спасибо. Пришлось поддерживать старый проект и спустя 7 лет твоя подсказка помогла!
    Видится мне, что проблема немного в другом:
    EditorGridPanel наследуется от Ext.grid.GridPanel причем не переносит некоторые свойства, в частности selectRow().
    В твоем примере ты просто корректируешь модель грида Ext.grid.RowSelectionModel - singleSelect:true.
    В дельнейшем пример работает и без блока viewready.
    См fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2n8m
    строка 69ю

    ОтветитьУдалить