Как скрыть строки в ExtJS GridPanel?

Question

Предположим, я знаю, какой индекс строки должен быть задан (скажем, если this.rowToBeDeleted имеет значение 2), как я могу скрыть эту строку только из сетки, но не из хранилища (у меня есть флагв магазине, который указывает, какие строки должны быть удалены из БД позже в моем коде веб-службы PHP).

Answer 1

Вы можете использовать один из методов store.filter() или скрыть элемент строки.

grid.getView().getRow(rowIndex).style.display = 'none';

Я думаю, что гораздо лучше, хотя бы просто удалить запись из хранилища и позволить магазину обновить представление, поскольку вы удаляете запись, а не просто скрываете ее. Если хранилище находится в пакетном режиме (по умолчанию: batch: true, restful: false), оно будет помнить, какие строки вы удалили, и не будет запускать запрос к серверу, пока вы не вызовете store.save().

.

Answer 2

В ExtJS 4.1 нет view.getRow(..). Вместо этого вы можете использовать:

this.view.addRowCls(index, 'hidden');

чтобы скрыть строку по указанному индексу, а

this.view.removeRowCls(index, 'hidden');

, чтобы показать это (где 'это' - сетка).

CSS класс hidden определяется как

.hidden,
{
    display: none;
}

Это полезно для особых сценариев, где store.filterBy() не подходит.

Answer 3

Я предлагаю использовать store.FilterBy() и передать функцию для проверки значения в rowToBedeleted:

store.filterBy(function(record) {
    return record.get("rowToBeDeleted") != 2;
});

Некоторое время назад я написал основной пост блога о сеточной фильтрации, вы можете прочитать его здесь: http://aboutfrontend.com/extjs/extjs-grid-filter/

Answer 4

В файле grid js напишите следующий код, чтобы применить CSS к тем строкам, которые вы хотите скрыть.

<pre><code>
    Ext.define('MyGrid',{
    extend : 'Ext.grid.Panel',
    xtype : ''mygrid',
    viewConfig : {
       getRowClass : function(record,id){
          if(record.get('rowToBeDeleted') == 2){
             return 'hide-row';
          }
       }
    },
    .................
    .................
    });

Теперь определите пользовательский CSS в файле custom.css:

.hide-row{display:none}

Это позволит скрыть строки в сетке без удаления или фильтрации из хранилища.

Answer 5

Для этого можно использовать методы store.filter() или store.filterBy().

Установите «скрытое» свойство в ваших записях и отфильтруйте все записи, например, со скрытым значением true. Таким образом, они все еще будут присутствовать в магазине, но не будут видны в сетке.