How to hide rows in ExtJS GridPanel?

Suppose I know which row index to target (with this.rowToBeDeleted having a value of 2, say), how can I hide this row only from the grid but not the store (I have a flag in the store, whic开发者_如何学Ch signifies what rows should be deleted from the db later in my PHP webservice code).

---

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

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

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

---

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

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

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

---

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

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

to hide the row at the specified index, and

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

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

CSS class hidden is defined as

.hidden,
{
    display: none;
}

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

---

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

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

Now define a custom CSS in custom.css file:

.hide-row{display:none}

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

---

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

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