[ACCEPTED]-How to hide rows in ExtJS GridPanel?-extjs

Accepted answer
Score: 14

You can either use one of the store.filter() methods or 9 you can hide the row element.

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

I think it's 8 much better though to just remove the record 7 from the store and let the store update 6 the view since you are deleting the record 5 and not just hiding it. With the store in 4 batch mode (the default: batch: true, restful: false), it 3 will remember which rows you've removed 2 and won't fire a request to the server until 1 you call store.save().

Score: 6

I suggest using store.FilterBy() and pass a function to 3 test the value of the value in rowToBedeleted:

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

I 2 wrote a basic blogpost about gridfiltering 1 a while ago, you can read it here: http://aboutfrontend.com/extjs/extjs-grid-filter/

Score: 6

In ExtJS 4.1, there is no view.getRow(..). Instead you 4 can use:

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

to hide the row at the specified 3 index, and

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

to show it (where 'this' is the 2 grid).

CSS class hidden is defined as

    display: none;

This is useful 1 for peculiar scenarious where store.filterBy() is not appropriate.

Score: 3

In the grid js file write following code 4 to apply a CSS to those rows which you want 3 to hide.

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

Now define a custom CSS in custom.css 2 file:


This will hide rows in grid without 1 removing or filtering from store.

Score: 2

You can use the store.filter() or store.filterBy() methods for that.

Set 5 a "hidden" property on your records and 4 the filter all records that have hidden 3 set to true for example. This way they'll 2 still be present in the store but not visible 1 in the grid.

More Related questions