How to hide rows in ExtJS GridPanel?

Question

假设我知道要定位哪个行索引（例如，this.rowToBeDeleted的值为2），我怎么能只从网格而不是商店隐藏这一行 （我在商店中有一个标志，表示哪些行应该稍后在我的PHP Web服务代码中从db中删除）。

Answer 1

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() .

Answer 2

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.

Answer 3

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/

Answer 4

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.

Answer 5

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.